Question

I’m trying to make a header that can slide down to reveal a contact form and some other content, triggered by a div inside that header.

Here’s my HTML:

<div id="header">
   <div id="content"></div>
   <div id="button" class="openpanel"></div>
</div>

#header has a margin-top of -300px

And here’s my jQuery:

  $(document).ready(function() {

    $(".openpanel").click(function(){

        $("#header").animate({

            "margin-top": "0px"

        })

      $("#button").removeClass("openpanel")
      $("#button").addClass("closepanel")


   });  


    $(".closepanel").click(function(){

        $("#header").animate({

            "margin-top": "-300px"

        }) 

      $("#button").removeClass("closepanel")
      $("#button").addClass("openpanel")


   });  


});

---

The problem is that it slides down perfectly, the classes show up properly, but when I click the button a second time the header doesn’t slide up again.

Answer 1

The issue with your code is that .closepanel didn’t exist when the click handler was bound. In such cases you delegate events using .on to the container/document object.

See below,

Change $(".openpanel").click(function(){ as below,

$("#header").on('click', '.openpanel', function(){

and

Change $(".closepanel").click(function(){

$("#header").on('click', '.closepanel', function(){

You can achieve what you are doing using a single function,

$('#button').on('click', function () {
    var mTop = 0;
    if ($(this).hasClass('openpanel')) {
        $(this).removeClass('openpanel').addClass('closepanel');
    } else {
        mTop = -300;
        $(this).removeClass('closepanel').addClass('openpanel'); 
    }

    $("#header").animate({ "marginTop": mTop });
});