Show and Hide (smooth dropdown FAQs)

Hi there! I’ve been attempting a smooth drop down for the FAQ section, and I followed this video:

yet, the height of the “hidden text” isn’t changing. Not sure what is going on. Help? :slight_smile:

Here is my page so far:

Your hide on load is set up incorrectly. Leave the initial state blank. Set up a trigger for “Load” and then set the dispaly to none. Tag that to your answer div.

Then on your question div, make a new interaction called “Load Answer” or something. Use the following settings.

To explain the interaction.
I first targeted my answer div and checked “Limit to sibling elements” so it doesn’t trigger every answer div I have on my page. This means the question and answer div must be nested together inside of their own div (typically called a wrapper).

Then on first click, I set the dispaly to “Block” and “Opacity” to 0 with a 0ms transition. In the second step, I put “Height” to auto, and “Opacity” to 100%. You can set your transition to however long you wish, just try to keep it equal to other items on your page.

On the second click, I just reversed it. First step is, “Opacity” to 0 and “Height” to 0. Second step is just setting it back to “Display None”.

That should be it.

@r_rosenow Ah!! thank you so much it worked for me :))

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