Questions tagged [toggleclass]

The toggleClass method in jQuery provides a mechanism for adding or removing a class or list of classes by name from selected elements.

The toggleClass method in jQuery provides a mechanism for adding or removing a class or list of classes by name from selected elements.

For example, if a CSS class has been applied to a div and the user wishes to remove this class from the div, the following code would accomplish this task:

theDiv.toggleClass('theClassName');

Documentation for the toggleClass method can be found in .toggleClass().

516 questions
231
votes
7 answers

Easiest way to toggle 2 classes in jQuery

If I have class .A and class .B and want to switch in between on button click, what's a nice solution for that in jQuery? I still don't understand how toggleClass() works. Is there an inline solution to put it in onclick="" event?
Stewie Griffin
  • 8,937
  • 22
  • 65
  • 95
36
votes
10 answers

addClass and removeClass in jQuery - not removing class

I'm trying to do something very simple. Basically I have a clickable div 'hot spot', when you click that it fills the screen and displays some content. I achieved this by simply changing the class of div, removing 'spot' and adding 'grown' and…
rhinoceros1
  • 361
  • 1
  • 3
  • 4
17
votes
10 answers

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…
Albin N
  • 1,341
  • 2
  • 13
  • 27
10
votes
4 answers

difference between toggleclass and addclass

I am working with jquery and attempting to add a class to a table on the selection of that table row. I was initially using the following code - $(this).parents("tr").toggleClass("over", this.clicked); For some reason, that wasn't…
czuroski
  • 4,166
  • 8
  • 47
  • 84
9
votes
5 answers

Javascript/HTML -- Toggle Visibility (Automatically causing one div element to hide when another is rendered visible)

Essentially what I am trying to do is create a website that has all of its content on the home page but only has some of the content visible at any one time. The way I read to do this is through toggling visibility. The problem I am having is that:…
Corey K
  • 109
  • 1
  • 1
  • 2
9
votes
4 answers

How to toggle the class of elements in sequence?

I am trying to have the class of each elements change one at a time in sequence automatically. This means element 1 glows then goes off as element 2 glows and then goes off and so on. When each element has glowed once the whole sequence starts…
Cain Nuke
  • 1,865
  • 4
  • 29
  • 52
6
votes
4 answers

jQuery toggleClass not working?

Very simply put : the line currentItem.toggleClass('open'); doesn't seem to work. More precisely, when inspecting the results with firebug, I can see the class "open" flashing (appearing and immediately disappearing) on the relevant element. So it's…
s427
  • 1,364
  • 3
  • 16
  • 32
6
votes
3 answers

jQuery toggleClass - easing isn't working

I am having problems getting the easing property of the toggleClass to work. I have searched on this site and others, but still cannot get it to work as expected. The class is being toggled just fine, but it does not ease in or out smoothly. Here is…
Andrew Fox
  • 836
  • 4
  • 13
  • 28
6
votes
3 answers

jquery toggleClass only works once

This script makes it so when you click on a
another
appears by adding class log_in_box_dd to #big_ul_hide. Once #big_ul_hide has that class, clicking anywhere (except the #big_ul_hide will remove that class, thus hiding it. So you click…
Ghost Echo
  • 1,777
  • 3
  • 30
  • 43
4
votes
1 answer

Twitter Bootstrap button checkboxes toggling issue in making a wysiwyg text editor

I'd like to make a simple text editor to allow people to make the font bold, italicized or underlined. I'm a little confused on how to use the "active" class on twitter bootstrap's buttons to toggle functions such as adding different font styles to…
tim peterson
  • 22,033
  • 50
  • 162
  • 279
4
votes
1 answer

jQuery UI toggleClass duration behaving strangely

I'm using jQuery UI .toggleClass(class, [duration]) to toggle a red background on a 100x100 box, but the results I'm getting are strange. See http://jqueryui.com/docs/toggleClass/ for reference. As you can see from this example -…
klicks
  • 71
  • 1
  • 6
4
votes
2 answers

jQuery problem within clicking on page

Ok, I am using this jQuery here: $('html').click(function(){ if ($(".trigger").hasClass("active")) { $(".panel").toggle("fast"); $(this).toggleClass("active"); } }); $(".panel").click(function(event){ …
SoLoGHoST
  • 2,473
  • 7
  • 28
  • 48
4
votes
5 answers

How to toggle between two divs

I am trying to toggle between two divs. For example, onload, I want the left content to show and the right content will remain hidden. If I click the right div, I want the left content to hide and the right content to appear and vise versa. I am…
Ryan Bennett
  • 495
  • 2
  • 8
  • 15
4
votes
4 answers

JQuery Toggle icon with a variety of different icons issue

I am currently trying to set up a menu with a icon toggle, so when one icon is clicked it changes to a cross and then when that cross is clicked it changes back to the original. I have got that far, but when I click a new image I want the old icon…
B.B
  • 124
  • 1
  • 16
4
votes
2 answers

toggle class based on accordion visibility

So I really don't think this should be this hard but I have been working on it for a few hours and have scoured Stack, which has helped get me to this point but not all of the way to where I need to be. I have an accordion for an FAQ page. This…
JSum
  • 487
  • 6
  • 16
1
2 3
34 35