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.

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().

503 questions

votes

4 answers

Changing An Elements Content

I would like to change the content of a element with a button click and then have it return back to its original message. How Would i do this preferable with toggle class if possible. Day…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/toggleclass" class="post-tag grid--cell" title="show questions tagged 'toggleclass'" rel="tag">toggleclass</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Oct 02 '15 at 22:52">asked Oct 02 '15 at 22:52</time> <a href="../../users/5354533/sam-opoku" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/5354533.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Sam Opoku" /> </a> <div class="s-user-card--info"> <a href="../../users/5354533/sam-opoku" class="s-user-card--link">Sam Opoku</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">69</li> <li class="s-award-bling s-award-bling__silver" title="2 silver badges">2</li> <li class="s-award-bling s-award-bling__bronze" title="8 bronze badges">8</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-32695927"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>3</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/32695927/toggleclass-with-setinterval-for-current-class-this" class="question-hyperlink">toggleClass with setInterval for current class (this)</a></h3> <div class="excerpt">I have a couple of boxes that have a shadow. I want the shadow to pulse on hover. The code below works but obviously makes all shadows to pulsate when I hover any one of them. I've tried to use this in the setInterval function in order to apply the…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/this" class="post-tag grid--cell" title="show questions tagged 'this'" rel="tag">this</a> <a href="../../questions/tagged/setinterval" class="post-tag grid--cell" title="show questions tagged 'setinterval'" rel="tag">setinterval</a> <a href="../../questions/tagged/toggleclass" class="post-tag grid--cell" title="show questions tagged 'toggleclass'" rel="tag">toggleclass</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Sep 21 '15 at 13:01">asked Sep 21 '15 at 13:01</time> <a href="../../users/2620873/lenny" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2620873.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Lenny" /> </a> <div class="s-user-card--info"> <a href="../../users/2620873/lenny" class="s-user-card--link">Lenny</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">446</li> <li class="s-award-bling s-award-bling__silver" title="5 silver badges">5</li> <li class="s-award-bling s-award-bling__bronze" title="21 bronze badges">21</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-32455634"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>2</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/32455634/is-it-possible-to-add-a-delay-to-the-remove-class-part-of-toggleclass-only" class="question-hyperlink">Is it possible to add a delay to the remove class part of toggleClass only?</a></h3> <div class="excerpt">Is it possible to add a delay to the remove class part of toggleClass only? In the fiddle, I would like the red div to turn green instantly when clicked. But it should delay in turning back to red when clicked…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/toggleclass" class="post-tag grid--cell" title="show questions tagged 'toggleclass'" rel="tag">toggleclass</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Sep 08 '15 at 10:41">asked Sep 08 '15 at 10:41</time> <a href="../../users/1405216/simbasounds" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1405216.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="simbasounds" /> </a> <div class="s-user-card--info"> <a href="../../users/1405216/simbasounds" class="s-user-card--link">simbasounds</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">327</li> <li class="s-award-bling s-award-bling__silver" title="5 silver badges">5</li> <li class="s-award-bling s-award-bling__bronze" title="13 bronze badges">13</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-31387946"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>2</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/31387946/javascript-onscroll-fade-same-class-but-with-different-div" class="question-hyperlink">javascript onscroll fade same class but with different div</a></h3> <div class="excerpt">I am really new at JavaScript and I want to learn something new. There is something wrong with my code : Why my div fades at the same time. I just want to ask how to fade different divs with same class name.can someone help me and explain that to…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/toggleclass" class="post-tag grid--cell" title="show questions tagged 'toggleclass'" rel="tag">toggleclass</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jul 13 '15 at 15:52">asked Jul 13 '15 at 15:52</time> <a href="../../users/4559607/jari" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/4559607.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="jari" /> </a> <div class="s-user-card--info"> <a href="../../users/4559607/jari" class="s-user-card--link">jari</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">25</li> <li class="s-award-bling s-award-bling__bronze" title="3 bronze badges">3</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-29915937"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/29915937/toggleclass-used-to-execute-two-different-scrolltop-methods-not-working" class="question-hyperlink">toggleClass used to execute two different scrollTop methods, not working</a></h3> <div class="excerpt">So I have the following function running and it works great. The selected div expands with the .slideToggle() function and the page slides down the body with the .animate() and .scrollTop() methods. $('.pfitem').click(function(){ …</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/jquery-animate" class="post-tag grid--cell" title="show questions tagged 'jquery-animate'" rel="tag">jquery-animate</a> <a href="../../questions/tagged/scrolltop" class="post-tag grid--cell" title="show questions tagged 'scrolltop'" rel="tag">scrolltop</a> <a href="../../questions/tagged/toggleclass" class="post-tag grid--cell" title="show questions tagged 'toggleclass'" rel="tag">toggleclass</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Apr 28 '15 at 09:47">asked Apr 28 '15 at 09:47</time> <a href="../../users/4841143/vinko" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/4841143.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Vinko" /> </a> <div class="s-user-card--info"> <a href="../../users/4841143/vinko" class="s-user-card--link">Vinko</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">181</li> <li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li> <li class="s-award-bling s-award-bling__silver" title="1 silver badge">1</li> <li class="s-award-bling s-award-bling__bronze" title="6 bronze badge">6</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-29544055"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/29544055/slick-carousel-target-active-slide-to-add-and-remove-animation-classes" class="question-hyperlink">Slick Carousel target active slide to add and remove animation classes</a></h3> <div class="excerpt">I am trying to target the active slide in my slick carousel by ken wheeler to add an animation to the p element within that slide. So, when the slide is active, the p element will bounce in (or something), then when the slide transitions to the…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/carousel" class="post-tag grid--cell" title="show questions tagged 'carousel'" rel="tag">carousel</a> <a href="../../questions/tagged/toggleclass" class="post-tag grid--cell" title="show questions tagged 'toggleclass'" rel="tag">toggleclass</a> <a href="../../questions/tagged/slick.js" class="post-tag grid--cell" title="show questions tagged 'slick.js'" rel="tag">slick.js</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Apr 09 '15 at 16:31">asked Apr 09 '15 at 16:31</time> <a href="../../users/4770127/jtsama" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/4770127.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="jtsama" /> </a> <div class="s-user-card--info"> <a href="../../users/4770127/jtsama" class="s-user-card--link">jtsama</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">71</li> <li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li> <li class="s-award-bling s-award-bling__silver" title="1 silver badge">1</li> <li class="s-award-bling s-award-bling__bronze" title="7 bronze badge">7</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-28532020"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status "> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/28532020/slidetoggle-on-click-function-not-working" class="question-hyperlink">.slideToggle on .click function not working</a></h3> <div class="excerpt">I'm building a Tumblr site and I want that when a user clicks on the tags span, it should display the tags. It was working properly until today, and now when you click on, it comes back immediately. I can't figure out what is wrong. HTML <span…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/click" class="post-tag grid--cell" title="show questions tagged 'click'" rel="tag">click</a> <a href="../../questions/tagged/slidetoggle" class="post-tag grid--cell" title="show questions tagged 'slidetoggle'" rel="tag">slidetoggle</a> <a href="../../questions/tagged/toggleclass" class="post-tag grid--cell" title="show questions tagged 'toggleclass'" rel="tag">toggleclass</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Feb 15 '15 at 22:33">asked Feb 15 '15 at 22:33</time> <a href="../../users/4133503/jrodr" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/4133503.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="jrodr" /> </a> <div class="s-user-card--info"> <a href="../../users/4133503/jrodr" class="s-user-card--link">jrodr</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">45</li> <li class="s-award-bling s-award-bling__bronze" title="3 bronze badges">3</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-27553757"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/27553757/jquery-adding-a-class-all-methods-i-ve-tried-remove-the-class-on-click" class="question-hyperlink">jQuery adding a class - all methods I've tried remove the class on click</a></h3> <div class="excerpt">I'm working with a 3D rotating button in which each face has a different phrase, but both are links to the same URL. I initially was rotating the cube button with a plain old css :hover, but I noticed that when you click the button it resets. It…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/button" class="post-tag grid--cell" title="show questions tagged 'button'" rel="tag">button</a> <a href="../../questions/tagged/flip" class="post-tag grid--cell" title="show questions tagged 'flip'" rel="tag">flip</a> <a href="../../questions/tagged/toggleclass" class="post-tag grid--cell" title="show questions tagged 'toggleclass'" rel="tag">toggleclass</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Dec 18 '14 at 18:57">asked Dec 18 '14 at 18:57</time> <a href="../../users/4363459/andandandandrew" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/4363459.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="andandandandrew" /> </a> <div class="s-user-card--info"> <a href="../../users/4363459/andandandandrew" class="s-user-card--link">andandandandrew</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">59</li> <li class="s-award-bling s-award-bling__silver" title="1 silver badges">1</li> <li class="s-award-bling s-award-bling__bronze" title="11 bronze badges">11</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-26154952"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>3</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/26154952/jquery-toggleclass-transition" class="question-hyperlink">jQuery .toggleClass() transition</a></h3> <div class="excerpt">im writing a jQuery Script that changes the opacity of an img on hover using .toggleClass() the css of the class is: .img-hover{ opacity: 0.5; transition: opacity 1s; } it issue is when I remove my mouse I want it to transition back to the…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/css-transitions" class="post-tag grid--cell" title="show questions tagged 'css-transitions'" rel="tag">css-transitions</a> <a href="../../questions/tagged/toggleclass" class="post-tag grid--cell" title="show questions tagged 'toggleclass'" rel="tag">toggleclass</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Oct 02 '14 at 05:33">asked Oct 02 '14 at 05:33</time> <a href="../../users/3506091/shout-it-web-solutions" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3506091.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Shout It Web Solutions" /> </a> <div class="s-user-card--info"> <a href="../../users/3506091/shout-it-web-solutions" class="s-user-card--link">Shout It Web Solutions</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">159</li> <li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li> <li class="s-award-bling s-award-bling__silver" title="3 silver badge">3</li> <li class="s-award-bling s-award-bling__bronze" title="13 bronze badge">13</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-25465967"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/25465967/jquery-toggleclass-using-index-attribute" class="question-hyperlink">JQuery ToggleClass using index attribute</a></h3> <div class="excerpt">I have a toggle functionality to implement in my page. I want to show a label next to span element. But the problem is I need to trigger only corresponding labels Here is my HTML code <div> <span class="header1">Header</span> …</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/indexing" class="post-tag grid--cell" title="show questions tagged 'indexing'" rel="tag">indexing</a> <a href="../../questions/tagged/toggleclass" class="post-tag grid--cell" title="show questions tagged 'toggleclass'" rel="tag">toggleclass</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Aug 23 '14 at 20:15">asked Aug 23 '14 at 20:15</time> <a href="../../users/1724856/bharath" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1724856.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Bharath" /> </a> <div class="s-user-card--info"> <a href="../../users/1724856/bharath" class="s-user-card--link">Bharath</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">573</li> <li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li> <li class="s-award-bling s-award-bling__silver" title="7 silver badge">7</li> <li class="s-award-bling s-award-bling__bronze" title="20 bronze badge">20</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-23003492"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/23003492/jquery-issue-with-this-toggleclass-and-multiple-btns-and-elements" class="question-hyperlink">jQuery issue with $(this).toggleClass and Multiple btns and elements</a></h3> <div class="excerpt">I am having trouble figuring this out. I have come up with jQuery that I can use multiple buttons to open a corresponding div using css transitions. I don't want to use text but the + and - to illustrate that the item is open and closed. I want the…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/multiple-instances" class="post-tag grid--cell" title="show questions tagged 'multiple-instances'" rel="tag">multiple-instances</a> <a href="../../questions/tagged/toggleclass" class="post-tag grid--cell" title="show questions tagged 'toggleclass'" rel="tag">toggleclass</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Apr 11 '14 at 04:24">asked Apr 11 '14 at 04:24</time> <a href="../../users/3522050/phlipinmi" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3522050.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="phlipinmi" /> </a> <div class="s-user-card--info"> <a href="../../users/3522050/phlipinmi" class="s-user-card--link">phlipinmi</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">63</li> <li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li> <li class="s-award-bling s-award-bling__silver" title="2 silver badge">2</li> <li class="s-award-bling s-award-bling__bronze" title="10 bronze badge">10</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-21832102"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status "> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/21832102/jquery-before-and-css" class="question-hyperlink">Jquery :before and Css</a></h3> <div class="excerpt">I have a div. In my CSS, I added ':before' to this div for create an other color block over it. In jquery, I want to change the color on the mouseover but only for the "div:before" block, but it doesn't work. How can I solve my problem ? Thks MY JS…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/colors" class="post-tag grid--cell" title="show questions tagged 'colors'" rel="tag">colors</a> <a href="../../questions/tagged/addclass" class="post-tag grid--cell" title="show questions tagged 'addclass'" rel="tag">addclass</a> <a href="../../questions/tagged/toggleclass" class="post-tag grid--cell" title="show questions tagged 'toggleclass'" rel="tag">toggleclass</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Feb 17 '14 at 14:49">asked Feb 17 '14 at 14:49</time> <a href="../../users/2657939/bonjour" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2657939.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Bonjour" /> </a> <div class="s-user-card--info"> <a href="../../users/2657939/bonjour" class="s-user-card--link">Bonjour</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">127</li> <li class="s-award-bling s-award-bling__silver" title="1 silver badges">1</li> <li class="s-award-bling s-award-bling__bronze" title="10 bronze badges">10</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-19883820"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>1</strong> answer </div> </div> </div> <div class="summary"> <h3><a href="../../questions/19883820/jquery-toggle-class-on-dynamically-assigned-class" class="question-hyperlink">jQuery toggle class on dynamically assigned class</a></h3> <div class="excerpt">I'm trying to toggle a class on a single button, where the class would be dynamically assigned based on a state. Here is my code: $('body').on('click', '.button', function () { var $itm = $(this).children(".icon"); if ($itm.hasClass('hide'))…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/toggleclass" class="post-tag grid--cell" title="show questions tagged 'toggleclass'" rel="tag">toggleclass</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Nov 09 '13 at 22:23">asked Nov 09 '13 at 22:23</time> <a href="../../users/920647/mike" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/920647.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Mike" /> </a> <div class="s-user-card--info"> <a href="../../users/920647/mike" class="s-user-card--link">Mike</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">171</li> <li class="s-award-bling s-award-bling__silver" title="5 silver badges">5</li> <li class="s-award-bling s-award-bling__bronze" title="10 bronze badges">10</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-18603558"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>5</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/18603558/toggleclass-not-working" class="question-hyperlink">$().toggleClass(); not working</a></h3> <div class="excerpt">Here is the Fiddle. I am trying to make my own checkbox by using a <div>, and applying colors with $().css(). When you click the div, I am trying to use $().toggleClass() in a click function to change the background-color to…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/css" class="post-tag grid--cell" title="show questions tagged 'css'" rel="tag">css</a> <a href="../../questions/tagged/toggleclass" class="post-tag grid--cell" title="show questions tagged 'toggleclass'" rel="tag">toggleclass</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Sep 04 '13 at 00:28">asked Sep 04 '13 at 00:28</time> <a href="../../users/2499019/joe-pigott" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2499019.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Joe Pigott" /> </a> <div class="s-user-card--info"> <a href="../../users/2499019/joe-pigott" class="s-user-card--link">Joe Pigott</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">7,981</li> <li class="s-award-bling s-award-bling__gold" title="6 gold badges">6</li> <li class="s-award-bling s-award-bling__silver" title="31 silver badges">31</li> <li class="s-award-bling s-award-bling__bronze" title="43 bronze badges">43</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-17588791"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>2</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>6</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/17588791/all-links-with-one-class-how-to-add-additional-class-on-click" class="question-hyperlink">All links with one class - how to add additional class on click?</a></h3> <div class="excerpt">It is possible if i have more links with the same class, on click add aditional class for active item? I have tried with jquery '.toggleClass()' but if i click on next link then both links has the same class <a href="link1.html">1</a> <a…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/class" class="post-tag grid--cell" title="show questions tagged 'class'" rel="tag">class</a> <a href="../../questions/tagged/toggleclass" class="post-tag grid--cell" title="show questions tagged 'toggleclass'" rel="tag">toggleclass</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jul 11 '13 at 08:38">asked Jul 11 '13 at 08:38</time> <a href="../../users/2571494/mirko-simic" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2571494.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Mirko Simic" /> </a> <div class="s-user-card--info"> <a href="../../users/2571494/mirko-simic" class="s-user-card--link">Mirko Simic</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">67</li> <li class="s-award-bling s-award-bling__gold" title="1 gold badge">1</li> <li class="s-award-bling s-award-bling__silver" title="2 silver badge">2</li> <li class="s-award-bling s-award-bling__bronze" title="9 bronze badge">9</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="s-pagination pager fr"> <a class="s-pagination--item" href="../../questions/tagged/toggleclass_page=4" rel="prev" title="Go to page 4">Prev </a> <a class="s-pagination--item" href="../../questions/tagged/toggleclass_page=1" rel="" title="Go to page 1">1</a> <a class="s-pagination--item" href="../../questions/tagged/toggleclass_page=2" rel="" title="Go to page 2">2</a> <a class="s-pagination--item" href="../../questions/tagged/toggleclass_page=3" rel="" title="Go to page 3">3</a> <div class="s-pagination--item s-pagination--item__clear">…</div> <a class="s-pagination--item" href="../../questions/tagged/toggleclass_page=33" rel="" title="Go to page 33">33</a> <a class="s-pagination--item" href="../../questions/tagged/toggleclass_page=34" rel="" title="Go to page 34">34</a> <a class="s-pagination--item" href="../../questions/tagged/toggleclass_page=6" rel="next" title="Go to page 6"> Next</a> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>