CODEWITHSUNDEEP
javascriptjqueryif-statementclicktoggle
JCHASE11
JCHASE11

Reputation: 3941

Using JQuery Conditionals to emulate toggle with click

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?

Upvotes: 1

Views: 238

Answers (2)

Ruben-J
Ruben-J

Reputation: 2693

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();      
});​

Upvotes: 1

Michal Klouda
Michal Klouda

Reputation: 14521

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.

Upvotes: 0

Related Questions