Two buttons to animate bottom drawer?

Question

I was hoping someone could help me to figure out how to create two buttons that perform the same action. Currently, I have a bottom drawer with a visible, clickable tab to open. I would like to create an additional button that performs the same action, but I'm not quite sure how to go about coding the JQuery function.

My current JQuery for the bottom drawer is below. I've also linked to a fiddle if it provides more context. My Fiddle

var h_bt = 0; //variable to keep track of the div#bottom condition.

    $('a#handler_bottom').on('click', function(event){  

        event.preventDefault();

        if(h_bt == 0){

            //$('div#bottom').animate({top:'600px'}, 300);
            //$('div#top').css({'background-color': 'red'});

            $(this).parent().animate({top:'480px'}, 300);
            $(this).css({'background-color': '#838da6'});

            h_bt = 1;
        }else{

            $(this).parent().animate({top:'600px'}, 300);
            $(this).css({'background-color': '#838da6'});

            h_bt = 0;
        }
    });

I appreciate the help!

Answer 1

Create a function and attach it to both the events:-

function repeatFunction(event){
 event.preventDefault();

    if(h_bt == 0){

        //$('div#bottom').animate({top:'600px'}, 300);
        //$('div#top').css({'background-color': 'red'});

        $(this).parent().animate({top:'480px'}, 300);
        $(this).css({'background-color': '#838da6'});

        h_bt = 1;
    }else{

        $(this).parent().animate({top:'600px'}, 300);
        $(this).css({'background-color': '#838da6'});

        h_bt = 0;
    }  

}

2. Apply it to both the event like:-

   $(function(){ $(element1).click(function(event){ repeatFunction(event); });

   $(element2).click(function(event){ repeatFunction(event); }); });