jquery toggleClass not working

Question

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?

Microelectronics

Ok simple. On first click what do you want to do? And for the second click what do you want to do? – Scarletscarlett

Answer 1

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>

Rhee

Answer 2

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>

Mithras

Your code left previously active links still active. – Rhee

Answer 3

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.

Orthognathous

Answer 4

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 :)

Helios

Answer 5

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

Requisition

Answer 6

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

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

Enphytotic