Accordion Toogle to show text

Hi I want to use some text that will be hidden and when it is clicked, it will display text.

Any suggestion?

Hi @Sebasgaes,

I am actually working on the same type of interaction for my website’s FAQ section—but can you give more information or screen shots? Do you want to click on something like a headline that reveals more text?

  1. Create the headline and additional text as elements (with assigned classes!) nested within a single Div
  2. Set the text to Display:None as its original state
  3. Select the headline > Global Objects and create a new interaction
  4. Select Trigger > Click
  5. Select "Affect different element(s) > input “text”
  6. Select “Limit to nested elements” unless you want this interaction to affect many elements at once
  7. First Click > set it to display
  8. Second Click > set it to display none

You should get an effect that looks similar to this: https://10to8.com/faqs/

Also, here’s the Webflow tutorial on click triggers: Show and hide on click | Webflow University

** HOWEVER, I WOULD APPRECIATE ADDITIONAL HELP: I have applied this interaction to several elements but it only works on one of them.

Hi @sevangatsby yes it is something like that. (really nice and crisp site that one)

Here is exactly what I want to do. http://pixel-industry.com/html/builder/index.html If you scroll all the way to the bottom, the “Our Core Values” section. Take a look at those texts, that’s what I need to replicate.

Thanks,

Hi,

The headline needs to be a button?

Nope! It can be normal text. You can apply trigger interactions to anything. I sketched something out - let me know if it makes sense!

I don’t know what am I doing wrong but is not working. Here is a link to preview the site I am working on, if you want to take a look. https://preview.webflow.com/preview/cdu-preview?preview=e453fa60b810ace6d800c69be4319069

I apprecite it.

@Sebasgaes I’d start by clearing the height of Valores section and setting to auto. I try to avoid using height and use minimum if necessary. Could potentially be a good use case for Flexbox.

Add a div block and place your heading and content areas inside.

Make you content inside the container visible

Remove the height on the outer container

Make the container holding text not visible

Change the affected element to the Container texto vo

Take the interaction off this section …switch to none.

I changed the names to accord and accord label just so I could keep track but you want the action on the label affecting th e container and limited sot siblings.

Hope that accomplishes what you are wanting.

Hi @jdesign I just started to do these steps, but you are saying in step 2, to add div and move all the heading and content areas inside. Aren’t this inside the div (Nuestros valores toggle container) ?

@jdesign I followed the steps, but it does not seems to work. Could you please take a look?

Much appreciated.

https://preview.webflow.com/preview/cdu-preview?preview=e453fa60b810ace6d800c69be4319069