Toggle between multiple div's or similar to tabs

Question

I am working on a custom tab which has animated bottom border which slides from one tab to another in

Example : http://codepen.io/anon/pen/NxNZLv

<div class="tab-nav-wrapper">
  <ul>
    <li class="one"><a href="#">ONE</a></li><!--
 --><li class="two"><a href="#">TWO</a></li><!--
 --><li class="three"><a href="#">THREE</a></li><!--
 --><li class="four"><a href="#">FOUR</a></li>
    <hr />
  </ul>
</div>
<div class="tab-content-wrapper">
  <div class="tab1-c"><p>This is ONE</p></div> 
  <div class="tab2-c"><p>This is TWO</p></div> 
  <div class="tab3-c"><p>This is THREE</p></div> 
  <div class="tab4-c"><p>This is FOUR</p></div> 

<div>

I want related items to show based on what ever tab is clicked. I tried to make it work but got errors.

Event tried to convert this into bootstrap tabs that didn't either work. It breaks the animation that i want on tabs

Boostrap based example: http://codepen.io/anon/pen/KVzjJo

I have updated fiddle and wrote script for each tab. rather than i wanted single script to manage it.

http://codepen.io/anon/pen/NxNZLv

Can we improve it?

Answer 1

You can get index of the clicked element by jquery .index() and then use jquery .eq() to show a tab content according the index of clicked element.

CodePen

Note: both function are zero-based, you don't need to plus one.

$('.tab-nav-wrapper ul li a').click(function(){  
  $('.tab-content-wrapper > div').hide();
 $('.tab-content-wrapper > div').eq($(this).parent().index()).show();  
});