jquery click add and remove class

Question

I have a list items and when I click Li element, add class "active", and others remove class

Here is Fiddle [http://fiddle.jshell.net/9yNtq/] And codes

<div class="boxList">
                <table>
                <tr>
                    <td>
                        <a href="#" data-ajax="false"><span>list1</span></a>
                    </td>
                    <td>
                        <a href="#" data-ajax="false"><span>list2</span></a>
                    </td>
                    <td>
                        <a href="#" data-ajax="false"><span>list3</span></a>
                    </td> 
                </tr>  
                </table>
            </div>


.boxList { margin:5px 0 0 0;   }
.boxList table { table-layout:fixed; width:100%;   }
.boxList td { width:33.3%; padding:0; margin:0; text-align:center;  }

.boxList a {   width:100%; font-size:1.07em; font-weight:bold;  height:62px; color:#000; line-height:1.3;  }
.boxList a span {   padding:0; margin:0;  width:100%; height:62px;  }
.boxList a.active { background:blue }


$('.boxList a').click(function(){ 
                $('.boxList a').removeClass("active"); 
                $(this).addClass("active"); 
            });

My question is... How to remove "active" class when click same element again ?

Milind Anantwar · Accepted Answer · 2014-05-30 02:42:06Z

4

You can use toggleClass('classname') for that. also you need to remove currently clicked element from selector using .not():

 $(this).toggleClass("active");

Full Code:

$('.boxList a').click(function(){ 
            $('.boxList a').not(this).removeClass("active"); 
            $(this).toggleClass("active"); 
});

Working Demo

answered May 30, 2014 at 2:42

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Savata Khamkar · Accepted Answer · 2014-05-30 02:54:36Z

2

You might be looking for this...

$('.boxList a').click(function(){ 

 if($(this).hasClass('active')){       
    $('.boxList a').removeClass("active"); 
 }
 else{

    $('.boxList a').removeClass("active");         
    $(this).addClass("active"); 
 }
});

Here is Example

answered May 30, 2014 at 2:54

Savata Khamkar

585 bronze badges

Collectives™ on Stack Overflow

jquery click add and remove class

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related