Full version: jsB@nk » Menu » Navigation » Content Tabs script
URL: https://www.javascriptbank.com/content-tabs-script.html
Use this versatile script to divide long content on your page into "virtual" sections, with each section viewable by clicking on a corresponding tab. It's a great way to display your content in an interactive, less overwhelming way to your visitors.
Full version: jsB@nk » Menu » Navigation » Content Tabs script
URL: https://www.javascriptbank.com/content-tabs-script.html
<style type=text/css>.dropcontent {DISPLAY: block}.tabstyle {BORDER-RIGHT: white 3px outset; BORDER-TOP: gray 1px solid; FONT: bold 14px Arial; WIDTH: 80px; CURSOR: hand; BACKGROUND-COLOR: lightyellow}.tabstyle B {MARGIN-LEFT: 3px; COLOR: blue; MARGIN-RIGHT: 23px}#cyclelinks2 {MARGIN-RIGHT: 15px}#cyclelinks2 .tabsfootstyle {FONT-WEIGHT: bold; MARGIN-RIGHT: 3px; BACKGROUND-COLOR: white; TEXT-DECORATION: none}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script type="text/javascript">if (window.addEventListener || window.attachEvent){document.write('<style type="text/css">\n')document.write('.dropcontent{display:none;}\n')document.write('</style>\n')}// Content Tabs script- By JavaScriptKit.com (http://www.javascriptkit.com)// Last updated: July 25th, 05'var showrecords=2 //specify number of contents to show per tabvar tabhighlightcolor="yellow" //specify tab color when selectedvar taboriginalcolor="lightyellow" //specify default tab color. Should echo your CSS file definition.////Stop editing here//////////////////////////////////////document.getElementsByClass=function(tag, classname){var tagcollect=document.all? document.all.tags(tag): document.getElementsByTagName(tag) //IE5 workaroundvar filteredcollect=new Array()var inc=0for (i=0;i<tagcollect.length;i++){if (tagcollect[i].className==classname)filteredcollect[inc++]=tagcollect[i]}return filteredcollect}function contractall(){var inc=0while (contentcollect[inc]){contentcollect[inc].style.display="none"inc++}}function expandone(whichpage){var lowerbound=(whichpage-1)*showrecordsvar upperbound=(tabstocreate==whichpage)? contentcollect.length-1 : lowerbound+showrecords-1contractall()for (i=lowerbound;i<=upperbound;i++)contentcollect[i].style.display="block"}function highlightone(whichtab){for (i=0;i<tabscollect.length;i++){tabscollect[i].style.backgroundColor=taboriginalcolortabscollect[i].style.borderRightColor="white"tabsfootcollect[i].style.backgroundColor="white"}tabscollect[whichtab].style.backgroundColor=tabhighlightcolortabscollect[whichtab].style.borderRightColor="gray"tabsfootcollect[whichtab].style.backgroundColor="#E8E8E8"}function generatetab(){contentcollect=document.getElementsByClass("p", "dropcontent")tabstocreate=Math.ceil(contentcollect.length/showrecords)linkshtml=""linkshtml2=""for (i=1;i<=tabstocreate;i++){linkshtml+='<span class="tabstyle" onClick="expandone('+i+');highlightone('+(i-1)+')"><b>Page '+i+'</b></span>'linkshtml2+='<a href="#" class="tabsfootstyle" onClick="expandone('+i+');highlightone('+(i-1)+');return false">Page '+i+'</a> '}document.getElementById("cyclelinks").innerHTML=linkshtmldocument.getElementById("cyclelinks2").innerHTML=linkshtml2tabscollect=document.getElementsByClass("span", "tabstyle")tabsfootcollect=document.getElementsByClass("a", "tabsfootstyle")highlightone(0)expandone(1)}if (window.addEventListener)window.addEventListener("load", generatetab, false)else if (window.attachEvent)window.attachEvent("onload", generatetab)</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div id="cyclelinks"></div><p class="dropcontent">Content 1 here.</p><p class="dropcontent">Content 2 here.</p><p class="dropcontent">Content 3 here.</p><div id="cyclelinks2" align="right"></div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->