Question

So I use this nice little widget to create tabs but my editor is complaining that it’s not valid and according to the spec that is true. As you can see I have two id’s named the same. My question is what is a correct way to fix this?

Here is the html

<ul id="tabs">
    <li><a href="javascript:void(0)" name="tab1">Stuff</a></li>
    {% if not is_passing %}
        <li><a href="javascript:void(0)" name="tab2">More Stuff</a></li>
    {% endif %}
</ul>

<div id="panes">
    <div id="tab1">Tab 1</div>
    <div id="tab2">Tab 2</div>
</div>

<script style="text/javascript">
    $(document).ready(function() {
        $("#panes").children("div").hide();         // Initially hide all content
        $("#tabs li:first").attr("id","current");   // Activate first tab
        $("#panes div:first").fadeIn();             // Show first tab content

        $('#tabs a').click(function(e) {
            e.preventDefault();
            if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
                return false;
            }
            else{
                $("#panes").children("div").hide();     //Hide all content
                $("#tabs li").attr("id","");            //Reset id's
                $(this).parent().attr("id","current");  // Activate this
                $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
            }
            return false;
        });
    });
</script>

Answer 1

There are two issues here:

1. Using #current on tabs and tab contents
2. Having tab name attribute and tab content id the same

Use a class for current instead of an id

Use addClass, removeClass and hasClass

Of course you’ll have to change your CSS from #current to .current

And use rel instead of name.

<ul id="tabs">
    <li><a href="javascript:void(0)" rel="tab1">Stuff</a></li>
    {% if not is_passing %}
        <li><a href="javascript:void(0)" rel="tab2">More Stuff</a></li>
    {% endif %}
</ul>

<div id="panes">
    <div id="tab1">Tab 1</div>
    <div id="tab2">Tab 2</div>
</div>


<script style="text/javascript">
    $(document).ready(function() {
        $("#panes").children("div").hide();         // Initially hide all content
        $("#tabs li:first").addClass("current");   // Activate first tab
        $("#panes div:first").fadeIn();             // Show first tab content

        $('#tabs a').click(function(e) {
            e.preventDefault();
            if ($(this).closest("li").hasClass("current")){ //detection for current tab
                return false;
            }
            else{
                $("#panes").children("div").hide();     //Hide all content
                $("#tabs li").removeClass("current");            //Reset
                $(this).parent().addClass("current");  // Activate this
                $('#' + $(this).attr('rel')).fadeIn(); // Show content for current tab
            }
            return false;
        });
    });
</script>