Using .css like a toggleclass

Question

I have a jQuery function that will change the CSS of the .flavor box with toggleClass and also add some text to the bottom. I want to change this so that when I click my box again (it is already active), the .active-text disappears also. How can I do this? Thanks!

$(".flavor").click(function(event) {
    $(this).toggleClass("flavor-active");
    $(this).find('.active-text').css('visibility', 'visible');
});

adeneo · Accepted Answer · 2014-08-02 13:51:52Z

1

You can just check for the class you're toggling

$(".flavor").click(function(event) {
    $(this).toggleClass("flavor-active")
           .find('.active-text') 
           .css('visibility', $(this).hasClass('flavor-active') ? 'visible' : 'hidden');
});

answered Aug 2, 2014 at 13:51

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

Comments

Ties · Accepted Answer · 2014-08-02 13:51:41Z

1

You can do this with .toggle()

$(this).find('.active-text').toggle()

Alternatively, if .active-text is a child of .flavor you can use CSS like this:

.flavor .active-text { display:none; }
.flavor-active .active-text { display:block; /* or inline, just not hidden */ }

answered Aug 2, 2014 at 13:51

Ties

5,8563 gold badges30 silver badges37 bronze badges

Collectives™ on Stack Overflow

Using .css like a toggleclass

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