Two Toggles on same element, need them to sync

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.

score 0 · Accepted Answer · answered Oct 25 '12 at 20:23

0

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");            
    }
};

answered Oct 25 '12 at 20:23

Rusty Jeans

1,426
9
10

I am getting a Uncaught SyntaxError: Unexpected token } – JCHASE11 Oct 25 '12 at 20:28
interesting, the syntax looked correct. but I am getting an error in my code. It must be conflicting with something else in my code, let me look. – JCHASE11 Oct 25 '12 at 20:33
yes this works great! I ran into this problem from copy and pasting your code: http://stackoverflow.com/questions/5733275/chrome-uncaught-syntax-error-unexpected-token-illegal – JCHASE11 Oct 25 '12 at 20:47

Bruno · Answer 2 · 2012-10-26T09:00:32.257

0

What about

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

I think that is what you are trying to do. Have a look here for more info on toggle.

Fiddle here

edited Oct 26 '12 at 09:00

answered Oct 25 '12 at 20:26

Bruno

5,772
1
26
43

Two Toggles on same element, need them to sync

2 Answers2