Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Liam Maclachlan
Liam Maclachlan
22,805 Points
Posted by Liam Maclachlan
Liam Maclachlan
22,805 Points

Is there an alternative way of writing "$(this).toggleClass('expanded').toggleClass('collapsed')" In jQuery?

I'm thinking of something liek an array in the command but I can't think of anything. I litterally just want to change this class toggle in to one call.

This is what I was thinking (that doesn't work)

Old code:

$(document).ready(function() {
    $('.tblRowCollapsable').click(function() {
        $(this)
        .toggleClass('expanded')
        .toggleClass('collapsed')
    })
})

Desired effect:

$(document).ready(function() {
    $('.tblRowCollapsable').click(function() {
        $(this)
        .toggleClass({
            class1: 'expanded',
            class2: 'collapsed'
        })
    })
})

I'm feeling like I am close but missing somethin. Any ideas would help :)

Benjamin Payne
Benjamin Payne
8,142 Points
Benjamin Payne
Benjamin Payne
8,142 Points

Hey Marcus, Are you just trying to do like if the element has the class collapse remove that class and add the class expanded and vice versa?

Best, Ben

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

Hey man.

Yeah. It is toggling the class from 'expand' to 'collapse'. My first idea was if I used the code 

$(document).ready(function() {
    $('.tblRowCollapsable').click(function() {
        $(this)
        .toggleClass('collapsed', 'expanded')
    })

})

but it will just remove and add the class 'collapsed'

Jacob Mishkin
Jacob Mishkin
23,118 Points

get rid of the coma and try again, let me know if that helps. also the examp I used maybe a little too simple for what your desired effect is. What is it that you want to do?

1 Answer

Jacob Mishkin
Jacob Mishkin
23,118 Points

If you wan to toggle multiple classes in one call using toggleClass() method you can like so:

<button class="button">Click Me</Button>

.button.clicked {
       color: red;
}
.button.choice {
       font-weight: bold;
}

$('button').click(function() {
$(this).toggleClass('clicked choice');
});

So there you go. if you have any questions please ask. I hope this helps.

Jacob Mishkin
Jacob Mishkin
23,118 Points

if you want to mess with the code I made a codepen for it:

http://codepen.io/JMishkin/pen/MwVdmW/

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

Hey man,

I tried it and it didn't work ( I assumed you missed a closing parenthesis on the $(this) :) )

$(document).ready(function() {
    $('.tblRowCollapsable').click(function() {
        $(this)
        .toggleClass('collapsed' 'expanded')
    })

})

it broke all javascript on the page :(

EDIT: checked out your code pen and it worked. You had 2 extra single quote in between the classes on the posted example :)

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

On a related topic, can you do a similar thing with the '.toggle()' function, in the intrest of slimming down code?

$('.expand').click(function(){
    $('.expand').hide()
    $('.collapse').show()
})

to something like (I understand this code is wrong)

$('.expand').click(function(){
    $('.expand' & '.collapse').toggle()
})

EDIT: dont't worry. Figured it out :)

$('.expand').click(function(){
    $('.expand, .collapse').toggle(100)
})
Jacob Mishkin
Jacob Mishkin
23,118 Points

Sorry about that I should of look more carefully while typing. I have made corrections to the code. Thanks! I'm glad its working!

Jacob Mishkin
Jacob Mishkin
23,118 Points

Right On man! I'm glad things are coming up Milhouse.