Does anyone know of a plug-in to have collapsing content?

I’ll elaborate more…

I would like to duplicate a situation from this page. Note the three red headers. When you click on one, it opens up the content below. Click again and it collapses.

They give a few javascript examples below to explain how it’s done. I’d be interested in the toggle version.

Question: How would I incorporate that into a page with say, 20 or more headers with content paragraphs below… in WordPress? I know that Javascript can get stripped out in a post (unless you wrap it in AWSOMnews plug-in code, or a table). Would the javascript need to appear once on the page code to cover all the headers that would expand/collapse, or would I need to wrap every header in a javascript code?

Thanks for your time.

Search for “accordion menus” I don’t know whether there is a plugin, but I am using a script from here: Stefan Born – Accordion Menu

The menu is a regular definition list. The entire list is wrapped in an “accordion” div class and organized normally. All you do is link the accordion.js and accordion.css files in your header, and style the accordion.css to your liking. You can have as many different accordion lists as you want, just wrap in another “accordion” classed div.

The only snaggle I have is that I need to modify the code to not expand the first menu item by default when the page loads. Haven’t gotten around to that yet.

I’ve done something similar but without animation using DD’s ET plugin.

However, you will have two limitations:
1. It’s not animated. It’s plain toggle between “display: none” and “display: block”;
2. You can’t have nested collapsing paragraphs. There is, however, a workaround this: if you really need nested level of collapsing content you can copy another instance of the plugin and replace in the second instance every ddet with ddset and you will need to organize your content like:
[DDET Parent 1]
Parent 1 content
[DDSET Child 1.1] Child 1.1 content[/DDSET]
[DDSET Child 1.2] Child 1.2 content[/DDSET]
…
[/DDET]
[DDET Parent 2] Parent 2 content… [/DDET]
…

Not very clean or elegant, but it does the job.
You still have to figure out how to expand all and colapse all though.
Your best bet would be writing to DD for that.

I hope this helped.