How can i create tab system using jQuery

Create tabbing system using jquery is supper easy. No need to use any jquery plugin for that, just use simple jquery like the below:

//Start jQuery part
<script>
$(document).ready(function(){
  $("button").click(function(){
      	$( ".cmn" ).hide();
     	$( ".cmn" ).eq( $(this).index() ).show();
    });
});
</script>
//jQuery part end

//Start CSS part
<style>
.cmn{
display:none
}
.class1.cmn{
display:block;
}
</style>
//CSS part end

// Start HTML part
<button>Tab1</button>
<button>Tab2</button>
<button>Tab3</button>
<button>Tab4</button>

<div class="class1 cmn">Tab1 content</div>
<div class="class2 cmn">Tab2 content</div>
<div class="class3 cmn">Tab3 content</div>
<div class="class4 cmn">Tab4 content</div>

//End HTML part

Leave a Reply

Your email address will not be published. Required fields are marked *