CODEWITHSUNDEEP
jquery
Michael Joseph Aubry
Michael Joseph Aubry

Reputation: 13452

Toggling a class using a variable?

Just a quick question, I would like to toggle a class keeping "fontawesome-angle" but toggling 'up' and 'down'? I tried several ways:

    $('.build-button').live('click', function(el) {

        var span = $(this).find('span'),
                var icon = //not sure here.. 
                           //I want to toggle between 'up' and 'down'


        span.toggleClass('fontawesome-angle-'+icon ? 'up' : 'down')

});

Sorry this is wrong I know, but I am stumped. This should be quite easy...

Looks like I found a solution:

    $('.build-button').live('click', function(el) {
        var span = $(this).find('span'),
            button = $(this),
            icon = $(this).hasClass('function_on')

        button.addClass('function_on')
        $('#content-builder').toggleClass('opened');
        span.toggleClass('fontawesome-angle-'+icon ? 'up' : 'down')

    });

I still need to tweak a few things, but if you want to point anything out go ahead, I'd be happy to hear.

Upvotes: 2

Views: 902

Answers (3)

Prashanth Thurairatnam
Prashanth Thurairatnam

Reputation: 4361

markup 

<span class="fontawesome-angle-up">test</span>
<input type="button" value="click" class="build-button"/>

js

   $(function(){
    $('.build-button').click(function(){
        $('span').toggleClass("fontawesome-angle-up fontawesome-angle-down");
    });
   });

fiddle

Upvotes: 3

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

Try

 $('.build-button').live('click', function (el) {
     var span = $(this).find('span'),
         button = $(this),
         icon = $(this).hasClass('function_on');

     button.addClass('function_on');
     $('#content-builder').toggleClass('opened');
     span.toggleClass('fontawesome-angle-up').toggleClass('fontawesome-angle-down');

 });

Or

span.toggleClass('fontawesome-angle-'+(icon ?'up':'down'))

Upvotes: 0

user1956570
user1956570

Reputation: 142

you could use this two methods :

the default class mb up or down

<span class="fontawesome-angle-up" ></span>

and you toggling something like this :

span.toggleClass('fontawesome-angle-up');
span.toggleClass('fontawesome-angle-down');

Upvotes: 0

Related Questions