CODEWITHSUNDEEP
jquery
nokujin
nokujin

Reputation: 11

Submenu functionality under menus using addClass() and removeClass() doesn't fully work

I'm creating multiple submenus under multiple menus using addClass() and removeClass(). Everything under the first menu (Red) works fine. All clicks well. However everything under the second menu (Blue) doesn't click well. How come? How do I make this work?

<style type="text/css">
.hide {
    display:none;
}
</style>

<script type="text/javascript">
$(document).ready(function(){

    $("#red_cont").addClass("hide");
    $("#blue_cont").addClass("hide");

  $("#red_button").click(function(){
    $("#blue_cont").addClass("hide");
    $("#red_cont").removeClass("hide");
  });

  $("#blue_button").click(function(){
    $("#red_cont").addClass("hide");
    $("#blue_cont").removeClass("hide");
  });


    $("#sect_1").addClass("hide");
    $("#sect_2").addClass("hide");
    $("#sect_3").addClass("hide");

  $("#sect_1_button").click(function(){
    $("#sect_2, #sect_3").addClass("hide");
    $("#sect_1").removeClass("hide");
  });

  $("#sect_2_button").click(function(){
    $("#sect_1, #sect_3").addClass("hide");
    $("#sect_2").removeClass("hide");
  });

  $("#sect_3_button").click(function(){
    $("#sect_1, #sect_2").addClass("hide");
    $("#sect_3").removeClass("hide");
  });
});
</script>
</head>
<body>

<p id="red_button">Red</p>
<p id="blue_button">Blue</p>
<hr />

<div class="total_cont" id="red_cont">
<p id="sect_1_button">Red section 1</p>
<p id="sect_2_button">Red section 2</p>
<p id="sect_3_button">Red section 3</p>
<hr />

    <div class="total_sect" id="sect_1">
        <ul>
            <li>Section 1 item</li>
            <li>Section 1 item</li>
            <li>Section 1 item</li>
        </ul>
    </div>
    <div class="total_sect" id="sect_2">
        <ul>
            <li>Section 2 item</li>
            <li>Section 2 item</li>
            <li>Section 2 item</li>
        </ul>
    </div>
    <div class="total_sect" id="sect_3">
        <ul>
            <li>Section 3 item</li>
            <li>Section 3 item</li>
            <li>Section 3 item</li>
        </ul>
    </div>
</div><!-- END red_cont -->



<div class="total_cont" id="blue_cont">
<p id="sect_1_button">Blue section 1</p>
<p id="sect_2_button">Blue section 2</p>
<p id="sect_3_button">Blue section 3</p>
<hr />

    <div class="total_sect" id="sect_1">
        <ul>
            <li>Section 1 item</li>
            <li>Section 1 item</li>
            <li>Section 1 item</li>
        </ul>
    </div>
    <div class="total_sect" id="sect_2">
        <ul>
            <li>Section 2 item</li>
            <li>Section 2 item</li>
            <li>Section 2 item</li>
        </ul>
    </div>
    <div class="total_sect" id="sect_3">
        <ul>
            <li>Section 3 item</li>
            <li>Section 3 item</li>
            <li>Section 3 item</li>
        </ul>
    </div>
</div><!-- END blue_cont -->

Upvotes: 0

Views: 325

Answers (2)

elclanrs
elclanrs

Reputation: 94101

Your problem must be what Didier Ghys said about your ids. What you can do is optimize that code a bit by caching your selectors and keeping things DRY. You can also get rid of the hide class since hide()|show() provides the same behavior. I'm thinking something like this will be more extensible, ie. add more colors...

var $containers = $('.total_cont'),
    colors = ['red', 'blue'];

var doMenu = function (that) {
    for (var i = 0, len = colors.length; i < len; i++) {
        var re = new RegExp(colors[i], 'i');
        if (re.test(that.id) {
            $containers.hide();
            $('#' + colors[i] + '_cont').show();
            break;
        }
    }
};

$containers.click(function () {
    doMenu(this);
});

Upvotes: 0

Didier Ghys
Didier Ghys

Reputation: 30666

You have multiple time the same ID which is invalid in HTML and does not work as you would expect to with jQuery.

Try using classes instead of IDs (or using different IDs but you'll end up with a lot of them...)

What you can do is change your markup to this

  1. Remove the IDs from the "Red/Blue section 1/2/3" and from the .total_sect elements

  2. Add a .section class to the "Red/Blue section 1/2/3".

    <div class="total_cont" id="red_cont">
    <p class="section">Red section 1</p>
    <p class="section">Red section 2</p>
    <p class="section">Red section 3</p>
    <hr />

    <div class="total_sect">
        <ul>
            <li>Section 1 item</li>
            <li>Section 1 item</li>
            <li>Section 1 item</li>
        </ul>
    </div>
    <div class="total_sect">
        <ul>
            <li>Section 2 item</li>
            <li>Section 2 item</li>
            <li>Section 2 item</li>
        </ul>
    </div>
    <div class="total_sect">
        <ul>
            <li>Section 3 item</li>
            <li>Section 3 item</li>
            <li>Section 3 item</li>
        </ul>
    </div>
</div>​

Then you can do this:

  1. You can hide all the sub-sections with

    $(".total_sect").addClass("hide");

  2. Clicking on a "Red/Blue section 1/2/3" item, get its index and, hide all .total_sect that are siblings and show only the corresponding one with index:

    $('.section').click(function() {
    // get the index of the clicked ".section"
    var idx = $(this).index();

    $(this)
        // hide all siblings ".total_sect" elements
        .siblings('.total_sect').addClass('hide')
        // but show the one at corresponding index
        .eq(idx).removeClass('hide');

});

DEMO

Upvotes: 2

Related Questions