Collapsible Text

Sandeep Gangadharan Sep 14, 2007

General

Display/hide information by just clicking a header. Previously opened section will be hidden when new one is opened. There is no limit to the amount of information you can add or sections you can use. Excellent for FAQs.


1] Example & Explanation:
Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam
2] Compatibility:
Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus
3] Notes:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut

Notes

Each collapsible header has 2 DIV tags, one is the main header that opens or closes the collapsible text and the other is for the collapsible text or content. In the first DIV tag the text (onClick="openClose('a1')") should not be changed and in the second DIV tag the text (id="a1" class="texter") is required. As you add more collapsible headers the identifier 'a1' should be incremented for all new headers in both DIV tags, for example a2 for header 2, a3 for header 3 etc. Everything else can be modified as per your requirements.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: collapsibleText.js


CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.


Head

Paste this code into the HEAD section of your HTML document.


Body

Paste this code into the BODY section of your HTML document


Leave a Response

(6 comments)

I used it to hide a whole table of form fields that are optional, and used a checkbox with the onClick event. Worked great and code is so short. Great work.

Eric Sep 3, 2008

I was thrown a last minute project and was given code that was not usable. I came to this site looking for collapsible text and this was EXACTLY what I needed! Wished I came here earlier on as I had another project - given even crappier code - that required collapsible lists and this would have been perfect.[br /][br /]blk

J Jan 31, 2008

Not sure of the problem. It's all the same on this end.

Lee Nov 6, 2007

The JavaScript in the sent email is not the same as on the site and does not work.

Joe Pallaitn Sep 21, 2007

Been looking for something like this for a long time. Thanks. Will definitely use it in our FAQs page.

Maryann Casas Sep 16, 2007