jQuery basic toggling only working one way

Question

I've created some quick jQuery toggle code:

$("#expander.closed").click(function(){
    console.log("opening");
    $("#expander").removeClass();
    $("#expander").addClass("open");
});
$("#expander.open").click(function(){
    console.log("closing");
    $("#expander").removeClass();
    $("#expander").addClass("closed");
});

The idea is that everytime you click #expander the class toggles between open and closed.

However, for some reason, it only works once, changing from closed to open, and then goes no further.

I have no clue why. Here's a jsFiddle.

score 2 · Accepted Answer · edited May 22 '14 at 12:22

2

I think in the beginning, when you bind the events, .closed class does not exists, so the event does not get bound

May be you should bind the event to some other criteria, or use live. which is deprecated though

Better way would be like this

$("#expander_parent").on('click', '#expander.closed', function(){
    // Do your stuff
})

edited May 22 '14 at 12:22

BenMorel

34,448
50
182
322

answered Feb 15 '13 at 19:26

Salman

9,299
6
40
73

Thanks for your answer. Why would using the parent be a better way though? – ACarter Feb 15 '13 at 19:33
JQuery `on` uses the parent delegate event trigger. But, I'd still go with the wirey's solution, which is simplified for your case. However, whenever you don't have elements at the time of binding the event and still want to be able to use it, use `on` – Salman Feb 15 '13 at 19:37
See this for your reference http://stackoverflow.com/questions/9122078/difference-between-onclick-vs-click – Salman Feb 15 '13 at 19:40

wirey00 · Answer 2 · 2013-02-15T19:35:31.843

2

Just bind it using the id and toggle the classes using .toggleClass

$("#expander").click(function(){
    $(this).toggleClass('open closed');
});

FIDDLE

if you need to do other functions depending on which class it has you can check like this

$("#expander").click(function(){
    var $this = $(this);
    $this.toggleClass('open closed');
    if($this.hasClass('open')){
       // do your open code
    }else{
       // do your close code
    }   
});

FIDDLE

edited Feb 15 '13 at 19:35

answered Feb 15 '13 at 19:27

wirey00

33,517
7
54
65

Thanks for your answer. However, in the wider scheme of things, I need to perform other functions related to which way the function has been toggled. (Basically, do some animations on one click, then on the other, reverse the animations.) Is there any way using this solution I can do anything like this? Cheers. – ACarter Feb 15 '13 at 19:32
You wouldn't happen to know why my animation isn't working [here](http://jsfiddle.net/4u9Vn/5/) would you? Thanks. – ACarter Feb 15 '13 at 20:04
1

@ACarter You forgot the `#` in your selector [FIDDLE](http://jsfiddle.net/amZ9C/) – wirey00 Feb 15 '13 at 20:11

score 1 · Answer 3 · answered Feb 15 '13 at 19:39

You can do this and add your other related operations within the if/else conditions

HTML:

<div id="expander" class="closed">Click Me</div>

CSS:

.closed {
    background-color: red;
}

.open {
    background-color: blue;
}

Javascript:

$("#expander.closed").click(function (){
    if ($('#expander').attr('class') === 'closed') {
          $('#expander').attr('class', 'open');

          // Add other related functions here
    } else {
        $('#expander').attr('class', 'closed');

        // Add other related functions here
    }    
});

http://jsfiddle.net/mCDwy/1/

jQuery basic toggling only working one way

3 Answers3