Simple JavaScript Multi Tabbed Widget For Your Web Page

Multi-Tab widgets are great for your websites or blogs to show more data in less space and can have unlimited pages in same size that will overlap them to save spaces and can be easily access via buttons to have views on that too. Its best for having same category widgets in same place so this can help in design too.

Now there are many one available only but not features are ok to use them because you have to watch out your loading time too so think twice before using the codes on your web that can make your loading time high of bad SEO effect. But this one is light weight and have to bunch of codes. All is here you you also do not have to hit any others URLs. Now go for it and garb the code to use it.

Features:

1.) Pure JavaScript Added.
2.) No External JavaScript Or JQuery File.
3.) Pure CSS Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Browser.

How To Add In A WebPage?

1.) Just Go To Your “Web Page File”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.

JavaScript:

<script type='text/javascript'>
//<![CDATA[
function JAVASCRIPTMULTITAB(NBTID, id)
{
 var JAVASCRIPTMULTITAB_WIDGET = document.getElementById(NBTID);
 var JMT = JAVASCRIPTMULTITAB_WIDGET.firstChild;
 while (JMT.className != "JMT" ) JMT = JMT.nextSibling;
 var NBT = JMT.firstChild;
 var i = 0;
 do
 {
 if (NBT.tagName == "A")
 {
 i++;
 NBT.href = "javascript:JAVASCRIPTMULTITAB_ubah('"+NBTID+"', "+i+");";
 NBT.className = (i == id) ? "Active" : "";
 NBT.blur();
 }
 }
 while (NBT = NBT.nextSibling);
 var Halamans = JAVASCRIPTMULTITAB_WIDGET.firstChild;
 while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling;
 var Halaman = Halamans.firstChild;
 var i = 0;
 do
 {
 if (Halaman.className == 'Halaman')
 {
 i++;
 if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px";
 Halaman.style.overflow = "auto";
 Halaman.style.display = (i == id) ? 'block' : 'none';
 }
 }
 while (Halaman = Halaman.nextSibling);
}
function JAVASCRIPTMULTITAB_ubah(NBTID, id) {
JAVASCRIPTMULTITAB(NBTID, id);
}
function JAVASCRIPTMULTITAB_inisial(NBTID) {
JAVASCRIPTMULTITAB(NBTID, 1);
document.write('');
}
//]]>
</script>

CSS:

<style type="text/css">
div.JAVASCRIPTMULTITAB_WIDGET div.JMT {
height: 24px;
overflow: hidden;
}
div.JAVASCRIPTMULTITAB_WIDGET div.JMT a:hover, div.JAVASCRIPTMULTITAB_WIDGET div.JMT a.Active {
background-color: #eee;
}
div.JAVASCRIPTMULTITAB_WIDGET div.Halamans {
clear: both;
border: 2px solid #f4f4f4;
overflow: hidden;
background-color: #ffffff;
}
div.JAVASCRIPTMULTITAB_WIDGET div.Halamans div.Halaman {
height: 100%; padding: 0px;
overflow: hidden;
}
div.JAVASCRIPTMULTITAB_WIDGET div.Halamans div.Halaman div.Alas {
padding: 3px 5px;
}
div.JAVASCRIPTMULTITAB_WIDGET div.JMT a {
border-left:1px solid #eee;
border-right:1px solid #eee;
border-top:1px solid #eee;
border-boNBTom:0px solid #eee;
float: left;
display: block;
width: 95px;
text-align: center;
vertical-align: middle;
height: 24px;
padding-top: 3px;
text-decoration: none;
font-family: "Arial", Serif;
font-size: 11px;
font-weight: 900;
color: #000000
}
</style>

HTML:

<form action="JAVASCRIPTMULTITAB_WIDGET.html" method="get">
<div id="JAVASCRIPTMULTITAB_WIDGET" class="JAVASCRIPTMULTITAB_WIDGET">
<div style="width: 300px;" class="JMT">
<a>Tab 1 Title</a>
<a>Tab 2 Title</a>
<a>Tab 3 Title</a>
</div>
<div style="width: 300px; height: 300px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<br/>
Tab 1 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 2 content goes here
</div>
</div>
<div class="Halaman">
<div class="Alas">
<br/>
Tab 3 content goes here
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">JAVASCRIPTMULTITAB_inisial('JAVASCRIPTMULTITAB_WIDGET');</script>

Customization:

1.) Edit Your HTML & CSS As Per Your Requirements. Rest JavaScript Is Ok For General Us. If You Are Pro, Then You Can Do Any Thing.

Last Words:

That’s all we have. If you have any problem with this code in your blogger template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…