OK so now I have my sliding open ul revealing all the list elements, and now I want the title bar that is clicked on to have a state of selected added to it, and then remove that state when it's closed...
the div above the UL has a class of .regionHeader
here's an example of the mark up
<div class="regionHeader">title of the region</div>
<ul class="region"><li>the region i'm hiding/showing</li></ul>
here's the javascript
var stockists = {
start: function() {
$('.region').hide();
$('.regionTitle').each(function(){
$(this).click(function(e){
e.preventDefault();
$(this).parent().next('.region').slideToggle(300);
});
});
}
};
$(stockists.start);
I've been trying addClass but it seems to just add the class and not remove it?
Can you not use toggleClass()
This way the class will be added/removed when you need it to be.
$(this).parent().toggleClass("className");
$(this).parent().next('.region').slideToggle(300);
$(this).parent().toggleClass('activeTitle'); // toggling the class on the parent
$(this).parent().next('.region').slideToggle(300);
to remove a class from an element you have to use removeClass
$(element).removeClass("classname");
Related
I've got this simple accordion jQuery script that's almost there with what I need it for, but I'm struggling with one last thing. The animated bits work fine - i.e. if the corresponding content block is closed, it slides open, and vice versa.
Here's the jQuery code:
$('.accordion-heading').click(function(){
$(this).next().slideToggle(300);
$('.accordion-content').not($(this).next()).slideUp(300);
$('.accordion-heading.active').removeClass('active');
$(this).addClass('active');
});
I want to have an 'active' class on the heading, but I need it to be removed if the same element is clicked twice. At the moment, everything works fine if a non-active heading is clicked. If an already-active heading is clicked again, however, the content block collapses correctly but the heading retains its 'active' class.
All you need to do is remove the .active class from elements that aren't the current element (you can use the same $.not() method you are currently on another element), then $.toggleClass() the .active class on the clicked element.
$('.accordion-heading').click(function(){
$(this).next().slideToggle(300);
$('.accordion-content').not($(this).next()).slideUp(300);
$(this).toggleClass('active');
$('.accordion-heading').not($(this)).removeClass('active');
});
.accordion-content {
display: none;
}
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion">
<div class="accordion-heading">heading</div>
<div class="accordion-content">body</div>
<div class="accordion-heading">heading</div>
<div class="accordion-content">body</div>
<div class="accordion-heading">heading</div>
<div class="accordion-content">body</div>
</div>
Instead of Adding the class and removing the class I suggest using .toggleClass() this way if the element has the class it will remove it and if it doesn't it will add it. If you want to have one of the accordions open manually give it the active class, and let your JS do the rest.
You could use 'toggleClass()' but I find its better to be more specific by checking if the item that was clicked has the class active. This way you can branch out and do other functions depending on the state:
$('.accordion-heading').click(function(){
var theHeading = $(this);
var theContent = theHeading.next();
var slideTimer = 300;
if(theHeading.hasClass('active')) {
$('.accordion-heading.active').removeClass('active').next().slideUp(slideTimer);
theContent.slideDown(slideTimer);
$(this).addClass('active');
} else {
theContent.slideUp(slideTimer);
$(this).removeClass('active');
}
});
This is doing my head in. Sorry if it's a schoolboy error. I have a very straight forward jquery accordion and I can toggle a style on the clickable header for each content by adding a class, but the class does not go when I click to collapse that element itself, only when I expand a sibling. I've popped this on jsfiddle with a simple colour switch.
$(document).ready(function ($) {
$('#showHideAccordion').find('h2').click(function () {
$('.active').removeClass('active');
//Expand or collapse this panel
$(this).next().slideToggle('slow');
$(this).toggleClass('active');
//Hide the other panels
$(".podContent").not($(this).next()).slideUp('slow').removeClass('active');
});
});
http://jsfiddle.net/wf73o6c6/
When you click the already active item, you remove the active class from it with this line:
$('.active').removeClass('active');
then you add it again with this line:
$(this).toggleClass('active');
Making this change to the first line will fix it:
$('.active').not($(this)).removeClass('active');
This way you remove the active class from all the other items, and with the toggleClass line that comes after, you remove the class from the clicked item.
You don't need to remove the class again on your last line, you already took care of that (I see you already used the .not() function here, so your mistake was probably just lack of attention).
$(".podContent").not($(this).next()).slideUp('slow');
Also, unrelated, but why $('#showHideAccordion').find('h2') and not just $('#showHideAccordion h2') ?
Here's an updated fiddle: http://jsfiddle.net/wf73o6c6/2/
My index.html has the following DOM structure:
ul -> class:nav nav-tabs -> li -> a
I want to add class .active to an <li> element when an <a> element within that <li> is clicked. I have written this code, but it is not working:
main.js
var main = function(){
$("a").click(function() {
$('li').removeClass('.active');
$(this).addClass(".active");
});
};
$(document).ready(main);
Try this:
var main = function(){
$("a").click(function() {
//travel up the DOM tree to the "closest" li element, add "active" class to it
$(this).closest('li').addClass("active");
});
};
$(document).ready(main);
So you're close, but you have a couple of problems:
You want to apply the new active class to the containing li, not
to the a which is getting clicked
addClass() and removeClass() don't need to be prefixed with the ..
.name is a selector for finding elements with a class of name. addClass and removeClass expect class names, not selectors. To add a class of "active", you simply give it the string "active":
$(this).addClass('active')
You're also adding the class directly to the link which was clicked. If you want to add it to the containing <li>, use:
$(this).parent().addClass('active')
You are try to manipulate li, but you manipulate the a tag.
You need to use:
$(this).closest('li').addClass("active");
EDIT
And also not use . character as others mentioned
you need to mention class name without .
$(this).addClass("active");
I'm using this code to change my buttons's class:
$('button').on('click', function(){
var btn=$(this);
if(btn.attr('class')=='tct-button'){
btn.removeClass('tct-button').addClass('tct-button2');
}
else{
btn.removeClass('tct-button2').addClass('tct-button');
}
});
The problem is that I have multiple div's with multiple buttons in each. I need to change this so that every time I click on a button in a div the others which were changed by a previous click (in that same div) change back to the default class which is 'tct-button', and just the last clicked button turns to 'tct-button2'. Would you please help me.
use toggleClass in jquery ,there is no need to check hasClass()
$(this).toggleClass("tct-button2 tct-button");
DEMO
Use hasClass()
Determine whether any of the matched elements are assigned the given class.
Code
$('button').on('click', function(){
var btn=$(this);
if(btn.hasClass('tct-button')){
btn.removeClass('tct-button').addClass('tct-button2');
}
else{
btn.removeClass('tct-button2').addClass('tct-button');
}
});
However I think you need
$('button').on('click', function(){
$('.tct-button2').removeClass('tct-button2'); //Remove all class
$(this).addClass('tct-button2'); //Add the class to current element
});
If you want to add an additional class to your buttons (tct-button2) whilst keeping tct-button on every button you could do what Satpal suggested.
However, from the sounds of it and I may be wrong, if you want to change the classes so that each button only has one class at a time on it (either tct-button or tct-button2) you can do similar to what Satpal suggested and use:
$('button').on('click', function(){
$('.tct-button2').addClass('tct-button').removeClass('tct-button2'); //Add original class and Remove tct-button2 class
$(this).removeClass('tct-button').addClass('tct-button2'); //Add the class to current element
});
Here is the example http://jsfiddle.net/lee_gladding/xao46uzs/
to only affect buttons in the div the clicked one belongs to, use a similar method to:
$('button').on('click', function(){
$(this).parent('div').find('.tct-button2').addClass('tct-button').removeClass('tct-button2'); //Remove all class in that div
$(this).removeClass('tct-button').addClass('tct-button2'); //Add the class to current element
});
(You might want to use a better selector for the parent, possibly a class or what ever your actual html uses)
Example:
http://jsfiddle.net/lee_gladding/xao46uzs/3/
When i click #tool I want to add the class .spanner to the div #drill.
However when #drill has the class .spanner and #tool is clicked i want the class to be removed?
Use the toggleClass function:
$("#tool").click(function() {
$("#drill").toggleClass("spanner");
});