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

Posted by Craig Watson
Craig Watson
27,930 Points

jQuery function to add class to one list element on click but remove from the previously clicked element

Hi everyone!

I have a UL that controls a bootstrap tab area, on page load I want the open tab contents corresponding list item to have a downward arrow. I'm using font awesome so getting the arrow is simple enough.

The bit I have real problems with and cant get my head around is adding the class to the item that is clicked and removing it from the previously opened tab.

I have a similar issue with another area of the site I'm on with so anyone that can help me here will be a life saver :)

This is where I am :

    $('a[href*="#subPagePanel"]').click(function (e) {
        $(this).children().toggleClass( 'fa-arrow-down' );
    });

This is great but it does not add to the open item on page load and does not remove arrow when clicking on any other item..(not so great then lol)

Help ....

Craig

1 Answer

Zoltán Holik
Zoltán Holik
3,401 Points
Zoltán Holik
Zoltán Holik
3,401 Points 
$('a[href*="#subPagePanel"]').click(function(e){
    $('a[href*="#subPagePanel"]').removeClass('fa-arrow-down' );
    $(this).addClass('fa-arrow-down');
});
Craig Watson
Craig Watson
27,930 Points

Zoltan :)

A true life saver ...

I had to add the .children to your code just to get my '<i>' element withing the '<a>' but you have saved me so much more time :)

Thanks

Craig

Craig Watson
Craig Watson
27,930 Points

Zoltan maybe you would be kind enough to help me with my other little situation,

I am trying to add an upward or downward arrow based on the class name 'in' used in the bootstrap collapse.

So I tried and if statement intending to use an if else in the end but I cant even get the if to work on its own yet ...

    //Panel Toggle Arrow Rotate
    if ( $('a[href*="#collapse"]').hasClass('in') ) {
        $(this).children().addClass( 'fa-arrow-up' );
    }

As you can probably tell my knowledge of jQuery is not vast :)

Craig