0 JavaScript code for making tabs which expands and collapses on clicking

Tabs which expand or collapse on clicking are very useful and attractive from a user perspective .The idea behind this is that the user needs to see only those things which are relevant to him. Here is the JavaScript code for Tabs which expand or collapse on clicking.

function newFunction(id){       if(document.getElementById(n).style.display == "none"){             document.getElementById(n).style.display="";          }else if(document.getElementById(n).style.display == ""){             document.getElementById(n).style.display = "none";       } }

Fig with tabs closed

 

Fig with tabs Open

 

 

The whole idea is to set an id to the div (or table) and this id is passed as the parameter to the function. To make the div hidden we set style.display to none. On clicking the tab the above function is called. If it is hidden, it is made visible by setting the display to “”. A common practice is to set the display to ‘block’. But this may lead to problems because block is container specific. In Mozilla it may affect the whole layout.                                     

One more way to make the div visible or hidden is by adjusting the height of the div. See the below code.

function showHideSects() {       if (!document.getElementsByTagName) return false;       var headings = document.getElementsByTagName("h2");       for (var i=0; i             headings[i].parentNode.className += " open";             /*headings[i].parentNode.style.height = "3em";             headings[i].parentNode.style.overflow = "hidden";*/             headings[i].onmouseover = function() {                   this.style.cursor = "pointer";       } } Here the tag with name =h2 is made to disappear. The height is set to ‘3em’.To display the whole content we set the height to “”. But I would advise you to stick to the earlier method because it is easy to understand and reuse.