Streaming live at 10am (PST)

Complicated Show/Hide Interaction


I am trying to achieve a more complicated show/hide interaction, as seen on the pyramid here:

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

Ah, one more thing - each button also has an “active” state when it has been clicked and its corresponding block of text is showing. Is this possible? It seems like I need the same interaction style as a Tab Element would have…

Hi @camillespo Sorry for the delayed response.

How you’re doing it is correct. But if you want to make it more “cleaner” you may need to go with the javascript custom coding route.

I’ve did something like what you’re doing on this page I made for fun:

When you click on each car model, the text changes. Here is the code I made:

$('.model-button').on('click', function(){
	model = $(this).attr('id')
 	$('.model-info').fadeOut(200, function(){
		if (model == 'S') {
			modelInfo = 'Model S is the worlds first premium electric sedan. Designed from the ground up as an electric car, Model S provides an unprecedented driving range of up to 300 miles and can accelerate from 0 to 60 in 5.6 seconds without burning a drop of gasoline.'
			$('#start-order').text('Start Customizing').show().on('click', function(){
			window.location.href = '/model-s-design-studio';
		if (model == 'X') {
			modelInfo = 'Model X is the safest, fastest and most capable sport utility vehicle in history. With all-wheel drive and a 90 kWh battery providing 257 miles of range, Model X has ample seating for seven adults and all of their gear. And it’s ludicrously fast, accelerating from zero to 60 miles per hour in as quick as 3.2 seconds. Model X is the SUV uncompromised.'
			$('#start-order').text('Reserve Yours Today').show().on('click', function(){
			window.location.href = '/';
		if (model == '3') {
			modelInfo = 'Pre-Orders Available March 2016'
		if (model == 'Y') {
			modelInfo = 'Coming after SpaceX lands on Mars.'
		$('#model-type').text('Model ' + model)

hope this helps :slight_smile:

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.