How to create vertical tabs with help of HTML & jquery?

Sometimes small things takes so much time in web development if we are beginner. Here i am talking about my next script which is small but very useful in so many project. "Vertical Tabs or you can say anything that you suit".Here i have assumed that you have some basic knowledge of jquery.

I have created a project in which i used the following technique for open different content when we click on left side link.And Believe me this is very easy to create but need some attention on this script.

First of all create the structure like following and make all div hide by default which will shown in right side. You can make this with help of jquery hide function of you can use display-none property in css. In my case i have used display none.Here is my html code that i have used in my script.

Note!   Please Remeber that your jquery should be included in footer when you run this script.

With the help of following script you can do this very easily.

$(".studentSidebarLeft").on("click",'li',function(){ //When we click on specific list.
  $(".studentSidebarLeft ul li").removeClass('active'); //remove class active from all list.
  $(this).attr('class','active'); //AT the same time add class active to current clicked list.
  $current_active_link=$(this).attr('data-student'); // get the div class which is passed with the help of data attribute
  $(".studentRightContent div").addClass('display-none'); //Add class to displaynone in all div
  $("."+$current_active_link).removeClass('display-none'); //At the same time remove class from its corresponding div.
 });

Categories: html, jquery