JQuery show() and hide() within the same loop

Question

I have the following piece of code, I need to show or hide the panels. My question is, the show() works on alternative clicks only.

var allPanels = $(".panel");
allPanels.hide(2000);
allPanels.show();

I would like to know the reason why show() does not work consistently.

Answer 1

That's not working because you set time in .hide(2000). You have to write in following way::

HTML

<div class="panel" >This is a DIV</div>
<button type="button" class="buttonClick" >Click me</button>

JQUERY

$(document).ready(function (e) {
    $(document).on('click', '.buttonClick', function () {
        var allPanels = $(".panel");
        allPanels.hide(2000, function(){
            allPanels.show();
        });
    });
});