I pasted the whole HTML structure containing JavaScript that will implement "collapsible text".
But it's not working at all! I mean it's only displaying all the text in the "expanded" form.
But there's nothing wrong with the code at all, as I've already tested it in FrontPage - & it's working.
If I am not mistaken CKEditor supports JavaScript. Right?
And here's my code:
<html> <head> <meta name="GENERATOR" content="Microsoft FrontPage 5.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>New Page 1</title> <script language="JavaScript" type="text/javascript"> <!-- Copyright 2005, Sandeep Gangadharan --> <!-- For more free scripts go to http://www.sivamdesign.com/scripts/ --> <!-- if (document.getElementById) { document.writeln('<style type="text/css"><!--') document.writeln('.texter {display:none} @media print {.texter {display:block;}}') document.writeln('//--></style>') } function openClose(theID) { if (document.getElementById(theID).style.display == "block") { document.getElementById(theID).style.display = "none"; document.getElementById("tick_"+theID).innerHTML = "+"; } else { document.getElementById(theID).style.display = "block"; document.getElementById("tick_"+theID).innerHTML = "-"; } } // --> </script> <div onClick="openClose('a1')" style="cursor:hand; cursor:pointer"><b><span id="tick_a1">+</span> 1] Example & Explanation:</b></div> <div id="a1" class="texter" style="width: 753; height: 80"> <p style="margin-left: 20; margin-top: 0;margin-bottom: 0"> This is the hidden text that was revealed when the header was clicked. Such hidden texts are mostly related to the main header which opens them. You can add any number of collapsible headers. </p> <div onClick="openClose('a1')" style="cursor:hand; cursor:pointer"> <p style="margin-top: 0; margin-bottom: 0"><span id="tick_a1"> <b>- Close "Example & Explanation"</b></span></div> </div> <div onClick="openClose('a2')" style="cursor:hand; cursor:pointer"> <p style="margin-top: 0; margin-bottom: 0"><b><span id="tick_a2">+</span> 2] Notes:</b></div> <div id="a2" class="texter"> <p style="margin-left: 20; margin-top: 0; margin-bottom: 0">This script works with all the newer versions of browsers like IE5+, NS6, Opera and also Firefox.<br /> This script does not work with older browsers like NSv4.x but degrades very well. </p> <div onClick="openClose('a2')" style="cursor:hand; cursor:pointer"><span id="tick_a2"> <b>- Close "Notes"</b></span></div> </div> </head> <body> </body> </html>