How to use the same jquery code in two diferents parts of the same page?

Eduardo Fuerte
Eduardo Fuerte used Ask the Experts™
on
Hi Experts

I need to use a the same code  in 02 parts of the same page with diferente contents:

My page use this tab near the top

         <ul class="tabs">
         <li><a href="#tab1" class="selected"> O que &eacute; ?</a></li>
         <li><a href="#tab2">PPAIS</a></li>
         <li><a href="#tab3">PNAE</a></li>
         </ul>

        <div class="tab" id="tab1" style="display: block;">
                <p style="text-align:justify"> Texto descritivo o que é ?</p>
        </div>
        <div class="tab" id="tab2">
        <p>Texto descritivo do PPAIS</p>
        </div>
        <div class="tab" id="tab3">
        <p>Texto descritivo do PNAE</p>
        </div>


<script>
$(function() {
  $('ul.tabs li a').click(function(e) {
    e.preventDefault();
    if (!$(this).hasClass('selected')) {
      $('.selected').removeClass('selected');
      $(this).addClass('selected');
      $('.tab').hide();
      $($(this).attr('href')).show();
    }
  });
});
</script>

Open in new window


I need to use it again in the botton part of the page (another similar tab with other content)

What must be changed in the 2nd use of the tab?

Thanks in advance!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
You don't need to repeat the jQuery - the same code can be used for as many groups of tabs as you like the only proviso is that the tabs have unique ID's.

You can see this working in the online sample here

HTML
    
<!-- FIRST SET OF TABS -->
    <ul class="tabs">
       <li><a href="#tab1" class="grey selected">TODOS</a></li>
       <li><a href="#tab2" class="blue" >PPAIS</a></li>
       <li><a href="#tab3" class="green">PNAE</a></li>
    </ul>
    <div class="tab" id="tab1">
      <p>Content for tab1</p>
    </div>
    <div class="tab" id="tab2">
      <p>Content for tab2</p>
    </div>
    <div class="tab" id="tab3">
      <p>Content for tab3</p>
    </div>

    <p>Some intervening text</p>
     <!-- SECOND SET OF TABS -->
    <ul class="tabs">
       <li><a href="#tab4" class="grey selected">Tab #1</a></li>
       <li><a href="#tab5" class="blue" >Tab #2</a></li>
       <li><a href="#tab6" class="green">Tab #3</a></li>
    </ul>
    <div class="tab" id="tab4">
      <p>Content for tab4</p>
    </div>
    <div class="tab" id="tab5">
      <p>Content for tab5</p>
    </div>
    <div class="tab" id="tab6">
      <p>Content for tab6</p>
    </div>

Open in new window

Script
<script>
$(function() {
  $('ul.tabs li a').click(function(e) {
    e.preventDefault();
    if (!$(this).hasClass('selected')) {
      $('.selected').removeClass('selected');
      $(this).addClass('selected');
      $('.tab').hide();
      $($(this).attr('href')).show();
    }
  });
});
</script>

Open in new window

Eduardo FuerteDeveloper and Analyst

Author

Commented:
Thnak you again!
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are most welcome again

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial