Code for Javascript Tabs, Hraeth Style | The Endless Forest

Code for Javascript Tabs, Hraeth Style

Unplugged's picture

October 29, 2014 - 10:29pm — Unplugged

Javascript Tabs

All credit goes to Hraeth. I did not make this code. I just got permission to compile the information.

For the alternative version by AlisonRobin, go here.

Other Links: Link Collection, CSS Quick Reference

Codes

1 Tab (Open/Close)

2 Tabs

3 Tabs

<a href="javascript:;" onmousedown="if(document.getElementById('tab1').style.display == 'none') { document.getElementById('tab1').style.display = 'block'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none'; }">TAB 1 </a> | <a href="javascript:;" onmousedown="if(document.getElementById('tab2').style.display == 'none') { document.getElementById('tab2').style.display = 'block'; document.getElementById('tab1').style.display = 'none'; document.getElementById('tab3').style.display = 'none'; }"> TAB 2 </a> | <a href="javascript:;" onmousedown="if(document.getElementById('tab3').style.display == 'none') { document.getElementById('tab3').style.display = 'block'; document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none';}"> TAB 3</a><br />
<br />
<div id="tab1" style="display:block; width:250px; height:100px; overflow:auto; text-align:left; color:#ffffff; border:1px solid #000000; border-radius:10px; padding:20px">TAB 1</div><div id="tab2" style="display:none; width:250px; height:100px; overflow:auto; text-align:left; color:#ffffff; border:1px solid #000000; border-radius:10px; padding:20px">TAB 2</div><div id="tab3" style="display:none; width:250px; height:100px; overflow:auto; text-align:left; color:#ffffff; border:1px solid #000000; border-radius:10px; padding:20px">TAB 3</div><br />

4 Tabs

<a href="javascript:;" onmousedown="if(document.getElementById('tab1').style.display == 'none') { document.getElementById('tab1').style.display = 'block'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none'; document.getElementById('tab4').style.display = 'none'; }"> TAB 1 </a> | <a href="javascript:;" onmousedown="if(document.getElementById('tab2').style.display == 'none') { document.getElementById('tab2').style.display = 'block'; document.getElementById('tab1').style.display = 'none'; document.getElementById('tab3').style.display = 'none'; document.getElementById('tab4').style.display = 'none'; }"> TAB 2 </a> | <a href="javascript:;" onmousedown="if(document.getElementById('tab3').style.display == 'none') { document.getElementById('tab3').style.display = 'block'; document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab4').style.display = 'none'; }"> TAB 3 </a> | <a href="javascript:;" onmousedown="if(document.getElementById('tab4').style.display == 'none') { document.getElementById('tab4').style.display = 'block'; document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none'; }"> TAB 4 </a><br />
<br />
<div id="tab1" style="display:block; width:250px; height:100px; overflow:auto; text-align:left; color:#ffffff; border:1px solid #000000; border-radius:10px; padding:20px">TAB 1</div><div id="tab2" style="display:none; width:250px; height:100px; overflow:auto; text-align:left; color:#ffffff; border:1px solid #000000; border-radius:10px; padding:20px">TAB 2</div><div id="tab3" style="display:none; width:250px; height:100px; overflow:auto; text-align:left; color:#ffffff; border:1px solid #000000; border-radius:10px; padding:20px">TAB 3</div><div id="tab4" style="display:none; width:250px; height:100px; overflow:auto; text-align:left; color:#ffffff; border:1px solid #000000; border-radius:10px; padding:20px">TAB 4</div><br />

5 Tabs

<a href="javascript:;" onmousedown="if(document.getElementById('tab1').style.display == 'none') { document.getElementById('tab1').style.display = 'block'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none'; document.getElementById('tab4').style.display = 'none';  document.getElementById('tab5').style.display = 'none'; }"> TAB 1  </a> | <a href="javascript:;" onmousedown="if(document.getElementById('tab2').style.display == 'none') { document.getElementById('tab2').style.display = 'block'; document.getElementById('tab1').style.display = 'none'; document.getElementById('tab3').style.display = 'none'; document.getElementById('tab4').style.display = 'none';  document.getElementById('tab5').style.display = 'none'; }"> TAB 2  </a> | <a href="javascript:;" onmousedown="if(document.getElementById('tab3').style.display == 'none') { document.getElementById('tab3').style.display = 'block'; document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab4').style.display = 'none';  document.getElementById('tab5').style.display = 'none'; }"> TAB 3  </a> | <a href="javascript:;" onmousedown="if(document.getElementById('tab4').style.display == 'none') { document.getElementById('tab4').style.display = 'block'; document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none';  document.getElementById('tab5').style.display = 'none'; }"> TAB 4  </a> | <a href="javascript:;" onmousedown="if(document.getElementById('tab5').style.display == 'none') { document.getElementById('tab5').style.display = 'block'; document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none';  document.getElementById('tab4').style.display = 'none'; }">  TAB 5  </a><br />
<br />
<div id="tab1" style="display:block; width:250px; height:100px; overflow:auto; text-align:left; color:#ffffff; border:1px solid #000000; border-radius:10px; padding:20px">TAB 1</div>  <div id="tab2" style="display:none; width:250px; height:100px; overflow:auto; text-align:left; color:#ffffff; border:1px solid #000000; border-radius:10px; padding:20px">TAB 2</div>  <div id="tab3" style="display:none; width:250px; height:100px; overflow:auto; text-align:left; color:#ffffff; border:1px solid #000000; border-radius:10px; padding:20px">TAB 3</div>  <div id="tab4" style="display:none; width:250px; height:100px; overflow:auto; text-align:left; color:#ffffff; border:1px solid #000000; border-radius:10px; padding:20px">TAB 4</div>  <div id="tab5" style="display:none; width:250px; height:100px; overflow:auto; text-align:left; color:#ffffff; border:1px solid #000000; border-radius:10px; padding:20px">TAB 5</div><br />

6 Tabs

<a href="javascript:;" onmousedown="if(document.getElementById('tab1').style.display == 'none') { document.getElementById('tab1').style.display = 'block'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none'; document.getElementById('tab4').style.display = 'none';  document.getElementById('tab5').style.display = 'none'; document.getElementById('tab6').style.display = 'none'; }">   TAB 1   </a> | <a href="javascript:;" onmousedown="if(document.getElementById('tab2').style.display == 'none') { document.getElementById('tab2').style.display = 'block'; document.getElementById('tab1').style.display = 'none'; document.getElementById('tab3').style.display = 'none'; document.getElementById('tab4').style.display = 'none';  document.getElementById('tab5').style.display = 'none'; document.getElementById('tab6').style.display = 'none'; }">   TAB 2   </a> | <a href="javascript:;" onmousedown="if(document.getElementById('tab3').style.display == 'none') { document.getElementById('tab3').style.display = 'block'; document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab4').style.display = 'none';  document.getElementById('tab5').style.display = 'none'; document.getElementById('tab6').style.display = 'none'; }">   TAB 3   </a> | <a href="javascript:;" onmousedown="if(document.getElementById('tab4').style.display == 'none') { document.getElementById('tab4').style.display = 'block'; document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none';  document.getElementById('tab5').style.display = 'none'; document.getElementById('tab6').style.display = 'none'; }">   TAB 4   </a> | <a href="javascript:;" onmousedown="if(document.getElementById('tab5').style.display == 'none') { document.getElementById('tab5').style.display = 'block'; document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none';  document.getElementById('tab4').style.display = 'none'; document.getElementById('tab6').style.display = 'none'; }">   TAB 5   </a> | <a href="javascript:;" onmousedown="if(document.getElementById('tab6').style.display == 'none') { document.getElementById('tab6').style.display = 'block'; document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none';  document.getElementById('tab4').style.display = 'none'; document.getElementById('tab5').style.display = 'none'; }">   TAB 6   </a><br />
<br />
<div id="tab1" style="display:block; width:250px; height:100px; overflow:auto; text-align:left; color:#ffffff; border:1px solid #000000; border-radius:10px; padding:20px">TAB 1</div>  <div id="tab2" style="display:none; width:250px; height:100px; overflow:auto; text-align:left; color:#ffffff; border:1px solid #000000; border-radius:10px; padding:20px">TAB 2</div>  <div id="tab3" style="display:none; width:250px; height:100px; overflow:auto; text-align:left; color:#ffffff; border:1px solid #000000; border-radius:10px; padding:20px">TAB 3</div>  <div id="tab4" style="display:none; width:250px; height:100px; overflow:auto; text-align:left; color:#ffffff; border:1px solid #000000; border-radius:10px; padding:20px">TAB 4</div>  <div id="tab5" style="display:none; width:250px; height:100px; overflow:auto; text-align:left; color:#ffffff; border:1px solid #000000; border-radius:10px; padding:20px">TAB 5</div>  <div id="tab6" style="display:none; width:250px; height:100px; overflow:auto; text-align:left; color:#ffffff; border:1px solid #000000; border-radius:10px; padding:20px">TAB 6</div><br />

Miscellaneous

Unplugged's blog
Login to post comments

October 29, 2014 - 10:31pm — Evern

Evern's picture

mmmmmmyes

mmmmmmyes

—

Login to post comments

October 29, 2014 - 10:59pm — Echosong

Echosong's picture

8D

8D

—

Login to post comments

October 30, 2014 - 1:49am — Aivilo

Aivilo's picture

\o/

\o/

—

Login to post comments

October 30, 2014 - 4:52am — Waning-Sun

Waning-Sun's picture

trackin.

trackin.

—

Avatar by Meadow. Siggy © Shey & Squeegie

Login to post comments

October 30, 2014 - 5:13am — Reyy

Reyy's picture

/

/

Login to post comments

October 30, 2014 - 6:05am — AlisonRobin

AlisonRobin's picture

Ah, nice! I need to make my

Ah, nice! I need to make my code pages pretty like yours.

When I update my tabs one I'll link to this so people can look at both and figure out how they work and stuff.

—

Login to post comments

November 28, 2017 - 8:53pm — Shaireen

Shaireen's picture

Track, thanks

Track, thanks

Login to post comments