CODEWITHSUNDEEP
jqueryaddclasstoggleclass
Albin N
Albin N

Reputation: 1401

jQuery: Remove class if other element is clicked

I have an ul-list that contains li-elements. When the user clicks on one of these li elements a class should be added to that element.

This is easy to setup, however, when the other li-element is clicked I want the "active"-class to be removed from the non-active li.

I have made a jsfiddle of the problem: http://jsfiddle.net/tGW3D/

There should be one li-element that is red at any one time. If you click the second and then the first, only the first should be red.

Upvotes: 17

Views: 67619

Answers (10)

Redwan
Redwan

Reputation: 1

You may use following code:

$('document').on('click', 'ul li', function() {
    $(this).addClass('active').siblings().removeClass("active") ;
});

Upvotes: 0

divyanshu shukla
divyanshu shukla

Reputation: 11

  $(document).on('click','ul li',function() {
        $(this).addClass('active').siblings().removeClass('active');
    });

This jquery code might help. Don't forget to add Jquery CDN.

Upvotes: 0

Rosmarine Popcorn
Rosmarine Popcorn

Reputation: 10967

This will remove the active class from each li that have active and than will add to the Element which was clicked.

$('body').on('click', 'li', function() {
      $('li.active').removeClass('active');
      $(this).addClass('active');
});

Upvotes: 52

AKM
AKM

Reputation: 5

<script>
    $(function() {
        $('li').click(function() {
            $("li.active").removeClass("active");
                $(this).addClass('active');
            });
        });
</script>

Upvotes: 0

Salman Aziz
Salman Aziz

Reputation: 466

You change css class by this code: 

$('li').click(function() {
    $(this).addClass('active').siblings().removeClass('active'); 
});

Link to jsfiddle

Upvotes: -1

Michael Koper
Michael Koper

Reputation: 9771

Something like this?

http://jsfiddle.net/c7ZE4/

You can use the siblings function. addClass returns the same jquery object $(this) so you can chain the siblings method which returns all the other elements except $(this). 

 $('li').click(function() {
  $(this).addClass('active').siblings().removeClass('active');
 });

Upvotes: 2

Techie
Techie

Reputation: 45124

 $('li').click(function() {
      $(this).addClass('active'); // add the class to the element that's clicked.
      $(this).siblings().removeClass('active'); // remove the class from siblings. 
});

If you know jquery you can chain it like below.

 $('li').click(function() {
      $(this).addClass('active').siblings().removeClass('active'); 
});

Above code will do the trick for you. Try this demo

Upvotes: 1

Alex
Alex

Reputation: 349

$('li').click(function() {
  $(this).siblings().removeClass('active');
  $(this).addClass('active');
});

Check: http://jsfiddle.net/tGW3D/2/

Upvotes: 2

BenM
BenM

Reputation: 53198

Just remove all instances of .active first, and then add it:

$('ul li').on('click', function() {  
    $('ul li.active').removeClass('active');
    $(this).addClass('active');    
});

Upvotes: 5

Ram
Ram

Reputation: 144659

You can use siblings and removeClass methods.

$('li').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
});

http://jsfiddle.net/Lb65e/

Upvotes: 23

Related Questions