How to Show and Hide the menu Bar

Question

Please see the design of this menu: http://jordanek.eu/aktual/index6.html where I made a menu (left side) which has some functionality such as when click on white bar “Vyrobce”, then a yellow bar “Vyrobce” would be appeared and white bar “Vyrobce” would be disappeared. And when click on closing link “x” on yellow bar “Vyrobce” it would be disappeared with all elements and white bar “Vyrobce” would be appeared again.

The problem is when I click anywhere on yellow bar “Vyrobce” except closing link “x”, the white bar “Vyrobce” appear again and show the both menu at a time. But I want to show only one bar at a time. How could I do it?

Can anybody help me to fix it? Thank you.

NB I use this javascript function for show and hide the bars which I got form: http://www.w3schools.com/jquery/jquery_hide_show.asp . You could see the whole code by visiting the given link and see the source code.

<script>
$(document).ready(function(){
    $("#headingOne").click(function(){
                $(".panel_heading1").hide();
    });
    $("#collapseOne").click(function(){
      $(".panel_heading1").show();
    });
});

Answer 1

如果看不到完整的代码，我们就无法分辨问题，但我认为您可能正在将click事件应用到整个$("#collapseOne")而您只需要将其应用于其中的X链接即可。

Answer 2

The div #collapseOne you are binding close event to, wraps entire area. Instead try to bind click event to only a close link:

$("#collapseOne [data-toggle='collapse']").click(function() {
    $(".panel_heading1").show();
});