Streaming live at 10am (PST)

Apply Show/Hide click animations to multiple text blocks


#1

I am trying to create a page with multiple buttons that reveal text when clicked. Once another button is clicked a new text block is revealed and the previous text block should collapse - only 1 hidden text should show on page at a given moment. I was able to follow the tutorials pretty well, but my page isn't doing exactly what I had in mind, and I can't figure it out.

Here is the page in question.

https://preview.webflow.com/preview/pphhealth?preview=ff5277bfb09e2fc99136dabfee07fd61

Thank you in advance!


#2

The page in question is only in the FAQ section. Thanks.


#3

You want the revealed blocks to collapse when you reveal another, right?

Sorry I'm a bit short of time to solve this, but I can quickly show you how to make your structure better and reuse elements and interactions.

Follow these steps and you'll end up with one only structure for you hide/show element and 2 interactions for everything:

  1. put all your tiems elements in divs like this:
  1. select your first title element and go to the interaction and edit it like this (check the box) :

Now what happens is the interaction is limited to only the text block tat is a sibling of the title block.

  1. delete all the blocks and keep only the first:
  1. give a name to the div and add a margin bottom 20
  1. copy the first div to fill the grid again:
  1. go to interaction and delete all the revealing interaction but the first one (keep the first one)(and let all the divs linked to the first reveal interaction). Also delete all the display none on load interaction except the first.
  1. test it again, it works, with only 1 interaction for the reveal and 1 for the hide on load, because you've limited the effects of the interaction on step 1.

#4

arg dammit all my points are 1.....


#5

This looks great! Will give it a go first chance I get. I'll ignore your bullet point error. Lol


#6

@vincent Thank you for showing me how to clean up the interactions, I took the housekeeping a step further and cleaned up the states too. I applied all of your suggestions but it doesn't accomplish what I am trying to achieve. I am still unable to reveal only one text block at a time. When you have time, can you take another look?

https://preview.webflow.com/preview/pphhealth?preview=ff5277bfb09e2fc99136dabfee07fd61

Thanks!


#7

@vincent any chance you can help with this, or should I assume this interaction is not possible?


#8

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