»
EnglishFrenchVietnamese

Print - Collapsible Navigation Menus - JavaScriptBank.com

Full version: jsB@nk » Menu » Navigation » Collapsible Navigation Menus
URL: https://www.javascriptbank.com/collapsible-navigation-menus.html

Collapsible Navigation Menus © JavaScriptBank.comToggle additional information through on click, that is feature of this JavaScript code. Just one collapsible div is opened each time, the previous one will be closed automatically. You can add unlimited information text select. Very excelent for F.A.Q.

Full version: jsB@nk » Menu » Navigation » Collapsible Navigation Menus
URL: https://www.javascriptbank.com/collapsible-navigation-menus.html



JavaScript
<script type="text/javascript"><!--// Created by Sandeep Gangadharan - http://www.sivamdesign.com/scripts/if (document.getElementById) {  document.write('<style type="text/css">.texter {display:none; border-left:white 20px solid; color:#404040; font: .9em verdana, arial, helvetica, sans-serif; margin-bottom: 12px;}</style>') }  var divNum = new Array("a1","a2","a3");  // at the left you should add a1, a2 etc. for each header you wish to include                                          // so if you want 4 headers you should add a1, a2, a3, a4 in the format shown                                          // enclosed in double quotesfunction openClose(theID) {  for(var i=0; i < divNum.length; i++) {    if (divNum[i] == theID) {      if (document.getElementById(divNum[i]).style.display == "block") { document.getElementById(divNum[i]).style.display = "none" }      else {        document.getElementById(divNum[i]).style.display = "block"      }  } else {    document.getElementById(divNum[i]).style.display = "none"; }  }}//--></script>


HTML
<div onclick="openClose('a1')" class="mainExpand">1] Example & Explanation:</div><div style="display: none;" id="a1" class="texter">Ma quande lingues coalesce, li grammatica del resultant lingue es plusimplic e regulari quam ti del coalescent lingues. Li nov lingua francava esser plu simplic e regulari quam </div><div onclick="openClose('a2')" class="mainExpand">2] Compatibility:</div><div style="display: none;" id="a2" class="texter">Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrelset gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum epluribus unum. Defacto lingo est igpay atinlay. Marquee selectus </div><div onclick="openClose('a3')" class="mainExpand">3] Notes:</div><div style="display: none;" id="a3" class="texter">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut </div>