Simple Tabs with CSS and jQuery - Customizing & Duplicating

I'm creating a website, using about 5 'J.Query-Tabbed-Window Boxs' via this Open Source Script; 'http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/#comment-16690' it implements great, and have got it working and holds up pretty well in even IE 6 +

I'm having some trouble using this for the four more times on the same page, I've duplicated the mark-up, even tried duplicating the styles and renaming the mark-ups Divs and related styles - but still unsuccessful. I shouldn't have to touch the classes, right? The tabs render and are fine, but no matter what I've tried so far, the tabs, when clicked - do nothing within that window/area, but instead link to the navigation within the initial first 'tabbed box'.

Any suggestions on implementing this 4 more times, on the same page?

The Code I have implemented for this is exactly the same as displayed in the reference link; Here is a link of it implemented in 1 instance. "http://www.sohtanaka.com/web-design/examples/tab开发者_C百科s/"

The HTML Mark-Up I'm using can be viewed in full here; 'http://s000.tinyupload.com/index.php?file_id=08860571195966022003&gk=transfer' via tinyupload within a text .rtf file.

cheers for the help!

The problem is that the javascript referenced in the link above does not take into account any grouping for the tabs. In order to have multiple tabs on the same page, you must add some grouping logic to the javascript.

You should probably also group your html. EX:

<div class="tab-parent">
    <ul class="tabs">...</ul>
    <div class="tab_container">...</div>
</div>

I have thrown together a quick DIRTY example of how you would accomplish this at http://jsfiddle.net/justinobney/aSQjF/2/

Fullscreen Example

You should probably refactor it though...

Thats perhaps because you are using same ID for all tab groups like tab1, tab2 all the time.

use a unique identifier for each tab, and make sure links are pointed to each tab properly like this

<ul class="tabs">
    <li><a href="#tab1">Gallery</a></li>
    <li><a href="#tab2">Submit</a></li>
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
        <!--Content-->
    </div>
    <div id="tab2" class="tab_content">
       <!--Content-->
    </div>
</div>


<ul class="tabs">
    <li><a href="#tab3">Gallery</a></li>
    <li><a href="#tab4">Submit</a></li>
</ul>

<div class="tab_container">
    <div id="tab3" class="tab_content">
        <!--Content-->
    </div>
    <div id="tab4" class="tab_content">
       <!--Content-->
    </div>
</div>

<div class="tabcontainer">

  <ul class="tabheading">

                    <li class="active" rel="tab1"><a href="javascript:return false;">Tab 1</a> </li>

                    <li rel="tab2"><a href="javascript:return false;">Tab 2</a> </li>
 </ul>



  <div class="tabbody active" id="tab1" style="display: block;">
    Tab 1
    Your Text or html

  </div>

  <div class="tabbody" id="tab2" style="display: none;">
    Tab 2
    Your Text or html

  </div>

</div>


<script>
     $('.tabheading li').click(function () {
            var tabid = $(this).attr("rel");
            $(this).parents('.tabcontainer').find('.active').removeClass('active');
            $('.tabbody').hide();
            $('#' + tabid).show();
            $(this).addClass('active');

            return false;
        });
    </script>