Jquery Show() works on the first click , doesnt work the second time on chrome . Click doesnt even work at all on firefox

Question

The function Show() works the first time and doesn't work the second time .

Also the click function doesn't work at all in firefox .

What am trying to accomplish with this is that on click of the #showmenu, hide the other showmenu2 which is a picture and show another div which was hidden before with CSS display:none then on click of PANEL-CLOSE, it shows the showmenu2 again and hide the other

  $(document).ready(function () {
    $('#jshowmenu').click(function () {
        $('.jbox').show("slide");
        //  $('.jbox').css("display", "inline-block");

        $('#jshowmenu2').hide();

    });

    $('.panel-close2').click(function () {
        $('#jshowmenu2').toggle("slide");


        $('.jbox').hide();

    });




    $('#jshowmenu2').click(function () {
        //    $('.jbox2').show("slide");

        //   $('.jbox2').css("display","block");
        if ($('#jshowmenu').is(":visible"))
            {
            $('#jshowmenu').hide();
        }
        $('.jbox2').show("slide");
        // $('.jbox2').toggle("slide");
    });

    $('.panel-close').click(function () {
        $('#jshowmenu').toggle("slide");


        $('.jbox2').hide();

    });

});

Answer 1

Jquery .show() and .hide() rely on inline styling, which is considered bad practice most of the time. I recommend creating a CSS class that hides the element, like .hidden { display: none; } and using .addClass('hidden') and .removeClass('hidden') instead.

You can also replace .is(":visible") by .hasClass('hidden') to test if the element is currently visible. I suggest using data-attributes instead of manually checking, but you may have a specific reason for doing it that way.