Streaming live at 10am (PST)

Interactions using styling from collection items? Creating a dynamic heatmap table

Hello! I’m stuck and looking for some help from y’all.

I am trying to create a heat map table, described and shown below:

  1. It’s essentially 4 columns, all of which start out gray with dark gray text.
  2. When you click the radio button at the top of each column, I want just that column’s cells to switch background colors from gray to the dynamic color selected in the collection item and have the text change to white.
  3. And when you switch to another radio button I want the previously-selected column to go back to gray, with dark gray text.

19%20AM

I have a collection built out to feed numbers into various graphical elements.

Option 1 (this is the one I’ve been playing with):
Interaction on each radio button. Column 2 (Industrial) has a dynamic text block and a fixed text block to bring in the %. In the other columns I am playing with using an HTML embed so I could use a single field, but this one doesn’t seem to pick up the interaction change in color.

{One note: it’s been frustrating to test as I have to publish in order to actually test the interaction. Preview doesn’t actually reflect my updates to the interaction.}

Option 2:
When I click radio button, use Javascript to add class to the dynamic cell below. And have that class get dynamic background-color from the collection item. Is this even possible and how would one do it?

Option 3: insert a duplicate gray content cell above the cell with color and have that opacity fade from 0 to 100. This seems like a really cumbersome approach

Recommendations on which approach is best and how to do it?

If I go with Option 1 or 3, will I need to build separate interactions for each column, telling the click to basically switch the color of the previously selected column (all 3 since all 3 are possible to have been selected) cells back to gray and invert the text?

I’m probably overthinking this and would love some outside input and help!

PAGE NAME: (in Drafts folder) “Benefits Landscape Interactive Landing”


Public share link here.