CODEWITHSUNDEEP
javascriptjquerytoggleclass
user3412718
user3412718

Reputation: 97

jquery toggleClass not working

i have two links and want to toggle its class when click on any link.

my links are

<a id="single" class="btn" >
<a id="double" class="btn active">

so i want to change class from btn to btn active i have this code 

$(document).ready(function(){
    $('a.btn').click(function(){
       $(this).removeClass('focus active');
       $(this).removeClass('active');
       $(this).toggleClass("btn active");
   });
});

I tried with this code because in some other javascript in my accpliceation is also adding these classes.

this work fine when its like bellow

<a id="single" class="btn" >
<a id="double" class="btn active">

but when my first button is active like bellow

<a id="single" class="btn active" >
<a id="double" class="btn">

this did't work but give classes as bellow when click on double

<a id="single" class="btn active" >
<a id="double" class="active">

this is strange cause its working when <a id="double" is active but did't work when <a id="single" is active.

all i want to do is when click on any link, 1. remove all classes from old link and give old link class "btn" 2. remove all classes from clicked link and give class "btn active"

how to fix this?

Upvotes: 5

Views: 70477

Answers (6)

Sohan Jangid
Sohan Jangid

Reputation: 158

Please use the following code before your toggle script. This will fix toggle class issue.

$("YourToggleSeletor").unbind('click');

Upvotes: 0

John Slegers
John Slegers

Reputation: 47111

Basic toggling

The following code toggles the class active on your buttons, which means it adds it when it's not there and it removes it when it's there :

$(document).ready(function(){
    $('a.btn').click(function(){
       $(this).toggleClass("active");
   });
});

Demo

$(document).ready(function(){
    $('a.btn').click(function(){
       $(this).toggleClass("active");
   });
});
body {
    margin: 0;
}

.btn {
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
    display: inline-block;
    background: #99f;
    cursor: pointer;
}

.btn.active {
    background: #00f;
    color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a id="single" class="btn">Button 1</a>
<a id="double" class="btn active">Button 2</a>
<a id="trupple" class="btn">Button 3</a>
<a id="quadruple" class="btn">Button 4</a>

Allow only one active button

If you want to have exactly one active button at all times, you should just remove the class active from ALL of your buttons and add it to the one clicked, which you could do like this :

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

Demo

$(document).ready(function(){
    $('a.btn').click(function(){
       $('.btn').removeClass("active");
       $(this).addClass("active");
   });
});
body {
    margin: 0;
}

.btn {
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
    display: inline-block;
    background: #99f;
    cursor: pointer;
}

.btn.active {
    background: #00f;
    color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a id="single" class="btn">Button 1</a>
<a id="double" class="btn active">Button 2</a>
<a id="tripple" class="btn">Button 3</a>
<a id="quadruple" class="btn">Button 4</a>

Upvotes: 5

song wang
song wang

Reputation: 11

$("a.btn").on("click", function() {
			$(this).toggleClass("active");
			$(this).siblings().toggleClass("active");
		});

Upvotes: 1

Hardipsinh Jadeja
Hardipsinh Jadeja

Reputation: 1297

Please change jquery code as follows :

$(document).ready(function(){
    $('a.btn').click(function(){
        $(this).toggleClass("btn btn active");
   });
});

This works for me. hope this helps :)

Upvotes: 2

xxxmatko
xxxmatko

Reputation: 4142

You just need to toggle class for the current clicked link, and before that, remove active and focus class for all links, like this:

$('a.btn').click(function(){
  $("a.btn").removeClass("active focus");
  $(this).toggleClass("active");
});
a.active {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="single" class="btn active">single</a>
<a id="double" class="btn">double</a>

Upvotes: 11

cssyphus
cssyphus

Reputation: 40106

Your jQuery selector may be the problem.

You are detecting the click on all anchor tags with class "btn":

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

But then you are removing class "btn". How can future clicks be detected? Answer: they won't.

Note that it is not necessary to specify both classes in the line

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

It appears that you really only want to toggle the active class, so just do

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

Also, I find it most useful to specify exactly what I want added/removed at any given time. In other words, I try only to use addClass() and removeClass(), rather than toggleClass(). It requires more code, but it is more safe.

Upvotes: 2

Related Questions