create a loop for jquery TABs in different DIVs

create a loop for jquery TABs in different DIVs

The code below I am going to use for more thank one tabs (to have something like tabs[i]) and I think would be better to have a loop:

  1. <script> $(document).ready(function() { $('.nav-tabs1 > li > a').click(function(event){ event.preventDefault();//stop browser to take action for clicked anchor var active_tab_selector = $('.nav-tabs1 > li.active > a').attr('href'); //get displaying tab content jQuery selector var actived_nav = $('.nav-tabs1 > li.active'); //find actived navigation and remove 'active' css actived_nav.removeClass('active'); $(this).parents('li').addClass('active'); //add 'active' css into clicked navigation $(active_tab_selector).removeClass('active'); //hide displaying tab content $(active_tab_selector).addClass('hide'); var target_tab_selector = $(this).attr('href'); //show target tab content $(target_tab_selector).removeClass('hide'); $(target_tab_selector).addClass('active'); }); }); </script> 



and in HTML it looks like:



  1. <!-- item 1 Starts --> <div class="ca-item ca-item-1"> <div class="ca-item-main"> <div class="ca-icon"></div> <h3>Philosophie</h3> <h4> <!--<span class="ca-quote">&ldquo;</span>--> <span>title</span> </h4> <a href="#" class="ca-more">more...</a> </div> <div class="ca-content-wrapper"> <div class="ca-content"> <!--****************************Tab1 Starts********** --> <section id="tab1" class="tab-content active"> <h6>Définition</h6> <a href="#" class="ca-close">close</a> <div class="ca-content-text"> <p> SOME TEXT SOME TEXT SOME TEXT</p></p> </div></section> <!--****************** Tab1 ENDs ******************** --> <!--**********************Tab2 Starst********** --> <section id="tab2" class="tab-content hide"> <h6>Similitudes avec la sociologie</h6> <a href="#" class="ca-close">close</a> <div class="ca-content-text"> <p> SOME TEXT SOME TEXT SOME TEXT</p> </div> </section> <!--********************** Tab2 ENDs ********** --> <!--**********************Tab3 Starts********** --> <section id="tab3" class="tab-content hide"> <h6>Différences avec la sociologie</h6> <a href="#" class="ca-close">close</a> <div class="ca-content-text"> <p> SOME TEXT SOME TEXT SOME TEXT</p> </div> </section> <!--********************** Tab3 ENDs ********** --> <!-- TAB nav starts --> <div> <ul class="nav nav-tabs1"> <li class="active"> <a href="#tab1">Définition</a> </li> <li> <a href="#tab2">Similitudes avec la sociologie</a> </li> <li> <a href="#tab3">Différences avec la sociologie</a> </li> </ul> </div> <!-- TAB nav ends --> </div> </div> </div> <!-- item 1 ENDs -->


So there are item1, item2, item3... and each of them has the same tabs (different descriptions). So. when I use this tab only once (for only in Item1's DIV) it works perfect but when I want to use for other "DIV"-s it breaks.

Could you help me to make a loop because I am new in this area and would like to have professionals' help.

Thanks in advance