Question

I have a panel that slides down when you click on a button. I also have another button on the buttom of the page that toggles the same pane. The problem is, they work independently of each other, so when a button is clicked, it starts the chain over.

HTML

<div id="videoPane">
     content inside panel
     //NOTE: the below anchor has a negative bottom margin, so it remains in plain view when the panel is closed.
     <a href="#" class="close"><img src="images/arrow.png"></a>
</div>

<div id="footerNav">
    <a class="vidbtn" id="b4" href="#">Watch Video</a>
</div>

I would like both a.vidbtn and a.close to perform the same task: opening up the panel; however, they need to work WITH eachother.

My Jquery is as follows:

$("#videoPane a").toggle(function(e){

    $("#videoPane").addClass("videoExpanded");
    $("#b4").addClass("activeBtn");

    e.preventDefault();

}, function(e){
    $("#videoPane").removeClass("videoExpanded");
    $("#b4").removeClass("activeBtn");

    e.preventDefault();
});



$("#b4").toggle(function(e){

    $("#videoPane").addClass("videoExpanded");
    $("#b4").addClass("activeBtn");

    e.preventDefault();

}, function(e){
   $("#videoPane").removeClass("videoExpanded");
    $("#b4").removeClass("activeBtn");

    e.preventDefault();
});

The code is straightforward: they both toggle the same element, #videoPane, and they need to work WITH eachother in sync.

Answer 1

Create a separate function to toggle the video pane, then call it on click from the other elements:

$("#videoPane a, #b4").click(function (e) {
    e.preventDefault();
    toggleVideoPane();
});

var toggleVideoPane = function () {
    var $videoPane = $('#videoPane');
    if ($videoPane.hasClass('videoExpanded')) {
        $("#videoPane").removeClass("videoExpanded");
        $("#b4").removeClass("activeBtn");        
    ​} else {
        $("#videoPane").addClass("videoExpanded");
        $("#b4").addClass("activeBtn");            
    }
};​​​​​​​​​