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

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!
Eduardo FuerteDeveloper and AnalystAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Eduardo FuerteDeveloper and AnalystAuthor Commented:
Thnak you again!
Julian HansenCommented:
You are most welcome again
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.