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.
Notes
- Created by: Sandeep Gangadharan
- Web Site: http://www.sivamdesign.com/scripts/
- Posted: September 14, 2007
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
Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.
