Open close button with jQuery

Question

So I have an icon that is essentially an open close button.

So when you open it, it turns red and rotates 45degrees. Now here's the issue. Since its open, I can't close it. Since if I change the div class the icon won't show while its in an active state. Here's the jQuery I'm using

$(".fa-plus").click(function() {
  $(".form").removeAttr("style");
  $('.fa-plus').css('-webkit-transform', 'rotate(45deg)');
  $('.fa-plus').css('-webkit-transition', '0.25s');
  $('.fa-plus').css('color', '#FF0000');
  $(".fa-plus").attr("id", "test");
});

This basically opens it, and ads an #id called test. And what happens is when I click on the icon which is named #test. It won't display an alert with this code, it only displays the alert when I press the +, not X

$("#test").click(function() {
  alert('test');
});

Here's a demo. I only want the alert when you click on the red X

seems to be working fine for me. it alerts both ways. – Yaje Jul 08 '14 at 00:13 — Yaje, Jul 08 '14 at 00:13
Same result as @Yaje in that it works both ways for me. – islanddave Jul 08 '14 at 00:14 — islanddave, Jul 08 '14 at 00:14
I only want an alert when you press the red `X` @Yaje – Jul 08 '14 at 00:16 — , Jul 08 '14 at 00:16
@islanddave ^^. Sorry if I wasn't clear enough – Jul 08 '14 at 00:17 — , Jul 08 '14 at 00:17

Roko C. Buljan · Accepted Answer · 2014-07-08T00:31:09.717

2

You can do it simply like: http://jsfiddle.net/M5N9V/2/

$(".fa-plus").click(function () {

    var io = this.io ^= 1;

    $(this).css({
        transform: "rotate("+ (io?45:0) +"deg)",
        color: io?"#f00":"#69f",
        transition:"0.25s"
    });

    if(io){
       // OPEN DROPDOWN LOGIC HERE
    }else{
       // CLOSE DROPDOWN LOGIC HERE
    }

});

Or even like: http://jsfiddle.net/M5N9V/3/

$(".fa-plus").click(function () {
    $(this).toggleClass("fa-red");
});

by modifying your CSS like:

.fa-plus {
    cursor: pointer;
    font-size: 24px;
    color: #69f;
    transition: 0.25s;
}
.fa-red{
    color: #f00;
    transform : rotate(45deg);
}

edited Jul 08 '14 at 00:31

answered Jul 08 '14 at 00:25

Roko C. Buljan

196,159
39
305
313

@jasonscript It's a way I figured out how to store a boolean (IO) state right into the `this` Object reference for the targeted element. `^= 1` is a bitwise XOR operator used to toggle it (1,0,1,0,1...) http://stackoverflow.com/questions/654057/where-would-i-use-a-bitwise-operator-in-javascript/#answer-22061240 and I've also created a simple example for you: http://jsbin.com/sugib/1/edit – Roko C. Buljan Jul 08 '14 at 07:18
oh I see. The `var io` isn't really required then is it? Since you're creating a global variable with `this` (which is referring to the `window` object) – jasonscript Jul 08 '14 at 08:34
1

@jasonscript no, it's better than you might think. Inside a jQ selector's event (like 'click') callback function i.e: `$('.element').click(function(){ this == ??? });`, the `this` always refers to the HTMLElement obcjet. So practically we're misusing for fun that `this` object assigning a new property called `io` that will store our "I/O" (1||0) value. Cool, right? ;) The same it's usually done using the `data-*` attribute, but I find this way much simpler. – Roko C. Buljan Jul 08 '14 at 13:23

shennan · Answer 2 · 2014-07-08T00:36:40.777

Here's a fiddle for you...

Best way to do this is utilising a CSS class, and add/remove it on each press using jQuery's toggleClass method. Then you can check if the class is applied and act accordingly afterwards:

JavaScript/jQuery:

$(".fa-plus").click(function() {
    $(this).toggleClass('fa-close');

    if(!$(this).hasClass('fa-close'))
        alert('closing!');
});

CSS:

.fa-plus {

    cursor: pointer;
    font-size: 24px;
    color: #6699FF;

    -webkit-transition:0.25s;
    -moz-transition:0.25s;
    -o-transition:0.25s;
    transition:0.25s;

}

.fa-close{

    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);

    color:#FF0000;

}

Open close button with jQuery

2 Answers2