Create multiple or dynamic tabs using pure Jquery [update]

Using of Jquery UI tabs or Jquery plugin is not a bad deal but they do increase the page loading time whereas my practice is to minimize the loading time as much as I can that is the reason I've developed simple animated tabs with a snippet of Jquery why don't you look at the demo below and then tutorial.

Read More:Replace the text with some animation using Jquery

Pen

See the Pen esKCD by Mohammad Hamza Dhamiya (@mohammadhamza) on CodePen

Read More:How to create a floating back to top button in Blogger?

Details

As I told the giant script can increase your page script however the below Jquery is too simple and minimized so what the script says.

$('.content-canvas>div').hide();
$('.content-canvas div:first-child').show();
$('.tab-button span:first-child').addClass('active');

When the page will be loaded three events will be triggered.

• All div inside class='content-canvas' will be hide.
• The first div inside the class='content-canvas' will be show.
• The first button will have the class='active'

Then the second event will be triggered when the button will be clicked that is

$('.tab-button').find('span').removeClass('active');
 var currentclass=$(this).attr('class');
$(this).addClass('active');

All the buttons having the class='active' will be removed and then the var currentclass will calculate the class of the clicked button.After that the clicked button will have the class='active'.

if($(this).attr('class')==currentclass) {
$('.content-canvas').find('div').hide();
$(this).find('div').show();
$(this).slideDown(200);
}
else{
$(this).hide();
}

After getting the class of the clicked button,the condition will be applied on each content.That is if any of the content container have the class which is equals to the currentclass will be show others will be hide.

Holla Done,if you didn't got anything our comments are always open.