Span class with jQuery - show hide

Question

I have a problem with span class with jQuery.

What I need:

• Click on the button blue menu I need show blue span rectangle and red rectangle hide.
• Click on the button red menu I need show red span rectangle and blue rectangle hide.
• When are both menu is closed, I need to show both span rectangles, red and blue.

It works well, if I close menu by clicking the same button. But if when you open the menu, click on the second button, rectangle span working bad. Since that time are both rectangles completely wrong.

I have a bug in the code with jQuery

<div class="all">
    <a href="#" class="menu">
        Menu 1
        <span class="rectangle"></span>
    </a>

    <a href="#" class="menu2">
        Menu 2
        <span class="rectangle2"></span>
    </a>

    <div class="sliding">
        <table id="tables">
            <tbody>
                <tr>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="sliding2">
        <table id="tables2">
            <tbody>
                <tr>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

jQuery(document).ready(function () {
    jQuery(".sliding, .sliding2").hide();
    jQuery(".menu, .menu2").show();
    jQuery(".all a .rectangle2, .all a .rectangle").show();

    jQuery(".menu").click(function () {
        jQuery(".sliding, .all a .rectangle2").toggle();
        jQuery(".sliding2").hide();
    });

    jQuery(".menu2").click(function () {
        jQuery(".sliding2, .all a .rectangle").toggle();
        jQuery(".sliding").hide();
    });    
});

.sliding {
    background-color: blue;
    display: none;
    padding: 20px
}
.menu {
    padding: 0 20px;
    color: blue;
    width: 200px
}
.menu2 {
    color: red;
}
.sliding2 {
    background-color: red;
    display: none;
    padding: 20px
}
.all a .rectangle {
    border-style: solid solid none;
    border-width: 10px;
    margin: 0 10px
}
.all a .rectangle2 {
    border-style: solid solid none;
    border-width: 10px;
    margin: 0 10px
}

Please help me. Have a nice day.

http://jsfiddle.net/k3y4114o/1/

Answer 1

Please try this:

    jQuery(".menu").click(function () {
        jQuery(".sliding, .all a .rectangle2").toggle();
        if(jQuery('.sliding').is(':visible')) {
            jQuery(".rectangle2").hide();
            jQuery(".rectangle").show(); 
        }
        jQuery(".sliding2").hide(); 
    });

    jQuery(".menu2").click(function () {
        jQuery(".sliding2, .all a .rectangle").toggle();
        if(jQuery('.sliding2').is(':visible')) {
            jQuery(".rectangle").hide();
            jQuery(".rectangle2").show();
        }
        jQuery(".sliding").hide();
    });

http://jsfiddle.net/Rino_Raj/k3y4114o/3/

Answer 2

I have changed your script, try this: jQuery(document).ready(function () { jQuery(".sliding, .sliding2").hide(); jQuery(".menu, .menu2").show(); jQuery(".all a .rectangle2, .all a .rectangle").show();

jQuery(".menu").click(function () {
    jQuery(".sliding, .all a .rectangle2").toggle(); 
    jQuery(".sliding2").hide(); 
    jQuery(".rectangle").show(); 
    jQuery(".rectangle2").hide(); 
   });

jQuery(".menu2").click(function () {
    jQuery(".sliding2, .all a .rectangle").toggle();
    jQuery(".sliding").hide();
    jQuery(".rectangle").hide();
    jQuery(".rectangle2").show();
  });

});