Using JQuery Conditionals to emulate toggle with click

Question

I am building a project that has multiple panels, triggered by one of three buttons. When a button is clicked, a panel slides out, and any existing panels slide away. I started off using toggles, but I needed all of the toggles to work with eachother, so I changed the event to a click.

Everything is working great, but I have run into a problem closing up the panels. You can see a jsfiddle demo here: http://jsfiddle.net/3W4uG/1/

As you can see, the panels open up just great; however, you cannot close them by pressing the button again.

My JQuery looks like this:

$("a.button").on("click", function(e){
        idClick = $(this).attr("id");
        newSelector = $("#pane"+idClick);

        //close panes and remove active classes
        $(".pane").removeClass("panelUp");
        $("a.button").removeClass("activeBtn");

        //make active
        $(this).addClass("activeBtn");
        newSelector.addClass("panelUp");

        e.preventDefault();
});

I was thinking about implementing a conditional statement so emulate a toggle like so:

var thisBtn = $(this);

if(thisBtn.hasClass("activeBtn")){
    $(this).removeClass("activeBtn");   //remove active state
    newSelector.removeClass("panelUp"); //remove panel with css3
}

else{
    $(".pane").removeClass("panelUp"); //closes down any other pane
    $("a.button").removeClass("activeBtn"); //removes all other active classes
    $(this).addClass("activeBtn");  //add active class to button just clicked
    newSelector.addClass("panelUp"); //slides up new pane with css3
}

This didnt work. In fact, it stopped all the panels from working all together. What can I do to make this work without switching to a toggle?

Ruben-J · Accepted Answer · 2012-10-26 14:21:15Z

1

http://jsfiddle.net/3W4uG/5/

$("a.button").on("click", function(e){

    var idClick = $(this).attr("id");
    var newSelector = $("#pane"+idClick);
    var isCurrentPane=    $(this).hasClass("activeBtn"); 

        $(".pane").removeClass("panelUp");
        $(".button").removeClass("activeBtn");

    if(!isCurrentPane)
    {
        $(this).addClass("activeBtn");
        newSelector.addClass("panelUp");
    }           
    e.preventDefault();      
});

answered Oct 26, 2012 at 14:21

Ruben-J

2,69317 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michal Klouda · Accepted Answer · 2012-10-26 14:09:22Z

0

One possible solution is remembering original state of the current panel (see wasActive bellow), and not reopening the panel if it was originally opened.

$("a.button").on("click", function(e) {

    idClick = $(this).attr("id");
    newSelector = $("#pane" + idClick);

    var wasActive = newSelector.hasClass('panelUp');  // newly added

    //close panes and remove active classes
    $(".pane").removeClass("panelUp");
    $("a.button").removeClass("activeBtn");

    if (!wasActive) {                                 // newly added

        //make active
        $(this).addClass("activeBtn");
        newSelector.addClass("panelUp");
    }

    e.preventDefault();

});

Updated FIDDLE.

answered Oct 26, 2012 at 14:09

Michal Klouda

14.6k7 gold badges58 silver badges79 bronze badges

Collectives™ on Stack Overflow

Using JQuery Conditionals to emulate toggle with click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related