Need help in creating an Accordion

Hi,

Is there a way I can create an accordion, where if you click on a tab, the content in it is shown. But when you click on another tab, the first content box closes and the new content is shown?

Example would be: Accordion with CSS3

Thanks,

It’s always difficult with interactions, if only possible, but it’s kind of easy with a navbar element. See it in action here (you can edit and duplicate this site.)

http://sab.webflow.io/vertical-2-levels-accordion-menu

1 Like

Here’s a solution using the drop down widget and interactions. http://webflowcodestutorials.webflow.io/

You’ll find it under the category of “Click” with at demo and step by step instructions!

1 Like

Thanks so much for the link! The demo you provided is exactly what I’ve been looking for (especially how the way it glides). However, I think I’m still new to using a dropdown in WebFlow and I may not be familiar with the names (i.e, “Select Dropdown Toggle-element” vs. “Select Dropdown-element”.

Would you happen to have a Webflow template of that, so I can take a look how you did it?:
http://webflowcodestutorials.webflow.io/clickdemos/dropdown-accordion

Thank you!

@hancelso
You can find the public page for @StevenP’s awesome site here: https://webflow.com/website/webflowcodestutorials

From that page you can use the purple clone button to copy the website into your own webflow account.
You can also use the “Open in Webflow” link to just preview the website in the webflow editor. :smile:

1 Like

I could cry. You have no idea what I’ve been through, ha! Thanks so much!! :smiley:

Awe haha :frowning: you’re welcome! let us know if you hit any other bumps or questions!

Ah, I do have a question, now that I’m diving into it.

I have this long sentence that need to get inside the Toggle, but it seems to be running through it. Using the demo as an example (screenshot attached), you can see the Third Accordion with text running through it.

Is there a way we can make it break the line when needed?

Thanks in advance! :slight_smile:

@hancelso very good question, not sure on why it won’t wrap for you - can’t seem to get any method to achieve wrapping other then just using the enter key :confused:

any ideas @StevenP?

Nope…can’t figure it out either. The only solution I could possibly think of at the moment is just hit “enter” where you want the line to break.

Maybe @cyberdave knows better?

1 Like

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