CODEWITHSUNDEEP
javascriptjquery
darnen
darnen

Reputation: 31

toggling classes on/off over multiple links

I can't seem to find exactly this issue on SE. I have a number of links in a list. When a link is clicked, the active class is added. If another link is clicked, I want that to go active and the previous active link to go inactive.

<li>
    <div class="yearaction year1">
        <a href="#" class="gotoslide inactiveyear" id="year1"></a>
    </div>
    2007
</li>
<li>
    <div class="yearaction year2">
        <a href="#" class="gotoslide inactiveyear" id="year2"></a>
    </div>
    2008
</li>
<li>
    <div class="yearaction year3">
        <a href="#" class="gotoslide inactiveyear" id="year3"></a>
    </div>
    2009
</li>
.
.
.


$(".gotoslide").click(function(){
   $(this).toggleClass("activeyear inactiveyear");
});

This implementation doesn't affect the other links. How do I make this toggle work correctly?

Upvotes: 0

Views: 130

Answers (5)

guioconnor
guioconnor

Reputation: 414

You have to first clean up the other links and then set the clicked link to the correct class.

Instead of toggling classes, a safer way to go about it is set the classes explicitely to what they are supposed to be with removeClass and add Class. Initially set all all the $('.activeYear') elements (presumable only one) to inactive and then set the clicked link to 'inactiveyear'

$(".gotoslide").click(function(e){
  e.preventDefault();

  $(".activeyear").removeClass("activeyear").addClass("inactiveyear");

  $(this).toggleClass("activeyear inactiveyear");
});

Working example here: http://jsfiddle.net/hVLML/4/

Upvotes: 0

xCNPx
xCNPx

Reputation: 605

You can try this, just toggle one class (active) with the use of the .toggleClass() method. This way you can assume the non-active state doesn't have the class of active and use CSS to style them accordingly. This does a check for another active element, if there is one, removes the active class and makes itself active. 

    $(document).on('click','.gotoslide', function (e) {
        if($('.gotoslide.active').length) {
            $('.gotoslide.active').removeClass('active');
        }
        $(this).toggleClass('active');
    });

Upvotes: 0

CodeVirtuoso
CodeVirtuoso

Reputation: 6448

It doesn't affect the other links because by using:

$(this)

you are referring only to that particular instance of .gotoslide class (the one that was clicked).

To affect all the other elements with .gotoslide class, refer to them with:

$('.gotoclass')

Upvotes: 0

Genie
Genie

Reputation: 76

It depends a little on what's supposed to happen when you click the same target twice and how you have set up those classes. I think this line of thinking might help you:

$(".gotoslide").click(function () {
    $(".gotoslide").removeClass("activeyear"); // removes .activeyear from all items
    $(this).addClass("activeyear"); // add .activeyear to this specific item
});

Upvotes: 0

blgt
blgt

Reputation: 8205

You're almost there. This will toggle the classes on the link you click on. To also toggle them on the one you had previously clicked on:

$(".gotoslide").click(function(){
    // previously active
    $(".activeyear").toggleClass("activeyear inactiveyear");
    $(this).toggleClass("activeyear inactiveyear");
});

Upvotes: 2

Related Questions