I am trying to achieve a more complicated show/hide interaction, as seen on the pyramid here: http://chapmaninvestment.com/investment-process.html
As you can see, when you click a button in the pyramid, it shows a corresponding block of text below the pyramid. When you click another button, the first block of text is replaced by a block that corresponds with the second button.
How can I achieve this?
Right now, each block of text has its own class and is set to Display: None. I began experimenting with interactions on the “Priced At or Below Intrinsic Value” and “Owner-Oriented Management” buttons, but realized it was going to get messy: I’d have to give each button its own interaction, and within each interaction there would be many steps: one to show the relevant block of text, and several others to hide all of the other blocks of text, since the user can click any button in any sequence they want. Is this the way only way to achieve this, or is there a cleaner / more proper way to do it?
Thanks so much in advance!
Here is my site Read-Only: LINK