Blog
CSS
HTML
JQuery
JScript
Website
Multitab widgets are very popular now a day. They help reduce webpage space and give a handy interface for users. Using multitab widget you can place different types of widgets or web data in a single place.
In a website multitab can be used for creating different sub-categories at a single page for example a software company uses multitab for defining system requirements, features, downloads help or any other related data of software on the main page of the software. Users, therefore, need not to go back and forth between different web pages for data collection or information viewing.
Similarly for blog different widgets like recent post, categories, top posts, blog archives and so on can be easily summed up at a single place. Multitab widgets usually used in blogs to shorten the height of the sidebars.
There are many multitab widgets are available in the market, some of them uses jQuery, some are based on JavaScript and some claimed to be CSS3. No matter what type of they are, they are lengthy and heavy resulting in the more loading time of the page. The multitab widget that I am going to share today is a small JavaScript based multitab that is cross browser too. Some of the exciting features of the multitab are:
Features
- Small in size.
- JavaScript based i.e. compatible with all browsers.
- Easy to Install.
- Supports Blogger, Wordpress and Web.
- Can extend new tabs.
Customization
The code for multitab is of three parts. CSS, JavaScript and HTML. CSS part is fully customizable. You can customize or change the whole CSS, but just remember, the first tab id will always have a display block property while the rest of the tabs have the display none property.
#tab {display:block;}#tab2, #tab3, … #tabn {display:none;}
In JavaScript you have to adjust the limit of variable i according to the number of total tabs. Always put the limit one more than the number of tabs, for example if there are 5 tabs then the limit value of variable i will be 6, if the number of tabs is 7 the value will be 8.
for (i =1; i<5; i++){For HTML every tab has an id of tab1, tab2, tab3 and so on. Similarly every tab button have the increasing onclick function of multitab(), like multitab(1), multitab(2), multitab(3)…
Just put the CSS and JavaScript code before the </head> tag and the HTML part in the <body> tag where you want it.
CSS Code
<style>::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar {
width: 6px;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
background-color: #0099ff;
}
#multitab ul {
display: inline;
list-style-type: none;
}
#multitab ul > li {
background: #00c4ff;
background: -moz-linear-gradient(90deg, #00c4ff 0%, #0099ff 100%);
background: -webkit-linear-gradient(90deg, #00c4ff 0%, #0099ff 100%);
background: -o-linear-gradient(90deg, #00c4ff 0%, #0099ff 100%);
background: -ms-linear-gradient(90deg, #00c4ff 0%, #0099ff 100%);
background: linear-gradient(180deg, #00c4ff 0%, #0099ff 100%);
padding: 7px;
float: left;
margin-right: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
border-top-right-radius: 5px;
}
#multitab ul > li a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
#multitab ul > li a:hover {
color: #0011ff
}
#tabcontent {
width: 250px;
height: 400px;
padding: 5px;
background-color: #eee;
margin-top: 15px;
-webkit-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.75);
box-shadow: 3px 3px 5px rgba(50, 50, 50, 0.75);
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
}
#tab1 {
overflow-x: hidden;
display: block;
}
#tab2, #tab3 {
overflow-x: hidden;
display: none;
}
</style>
Javascript Code
<script>function multitab(tabid) {
for (i=1; i<4; i++){
if (i == tabid) {
var j = "tab" + i ;
document.getElementById(j).style.display='block';
}
else {
var k = "tab" + i ;
document.getElementById(k).style.display='none';
}
}
}
</script>
HTML Code
<div id='multitab'><ul>
<li><a onclick='multitab(1)'>Tab1</a></li>
<li><a onclick='multitab(2)'>Tab2</a></li>
<li><a onclick='multitab(3)'>Tab3</a></li>
</ul>
<div id='tabcontent'>
<div id='tab1'>Tab1 Data …</div>
<div id='tab2'>Tab2 Data …</div>
<div id='tab3'>Tab3 Data …</div>
</div>
</div>
If you still have any queries, feel free to ask.
Your blog is very useful. Thanks for writing such a great blog. As we are one of the leading Packers and Movers in India for more details kindly visit.
ReplyDeleteBy- Transtech Packers
Useful Post, i Request you to write more blogs like this Data Science Online Training bangalore
ReplyDeletecloudkeeda
ReplyDeletewhat is microsoft azure
microsoft free account
azure adf
adf interview questions
azure certifications path
cloudkeeda
cloudkeeda
Smm Panel
ReplyDeletesmm panel
iş ilanları
instagram takipçi satın al
hirdavatciburada.com
beyazesyateknikservisi.com.tr
Servis
tiktok jeton hilesi