We Keep Coding

Add active state to simple jQuery accordion

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');
}
});

Change padding using jquery to class but only to clicked item

OK, so I am sorry if this question is repeated BUT I really could not figure answer.
O have menu with classes, and I want that when I click on some menu items .menuitem > a
that link have more paddingBottom.
So I managed to use .click function and animate function but that add padding to entire class ( all menu items ).
What I need is adding padding only to THAT CLICKED menu.
Code that make padding to all menu items ( entire class )
$(".menuitem" ).click(function() {
$('.mainNav > ul > li > a').animate({paddingBottom:"+=17px"});
});

when I click on some menu items .menuitem > a that link have more paddingBottom
Within the click handler, the particular .menuitem element that was clicked can be referred to by this. Thus, using $(this) you can use jQuery's DOM traversal method(s) to move from that element to the related one you want to animate.
If the anchor is a child of the .menuitem element that you are binding the click handler to then the simplest way to get a reference to that anchor is with the .find() method:
$( ".menuitem" ).click(function() {
$(this).find("a").animate({paddingBottom:"+=17px"});
});

you can use this key word to select your 'a' tag which you click on it now 'only'
$('.menuitem').click(function(){
$(this).find('a').animate({'padding':'+=17px'});
});
or more specific
$('.menuitem li').click(function(){
$(this).find('a').animate({'padding':'+=17px'});
});

How to change button class in a div while just the last one can keep the change?

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/

Toggle 2 classes at once?

Afternoon, fellow overflowers. I have a relatively simple question but cannot wrap my head around what needs to be done. So I am using glyphicons/font awesome as collapsible arrows and need the up and down arrows to swap on click. So on clicking the tag, remove down and add up. On the next click remove up and add down classes. Any ideas? Thanks in advance.
$('.accordion-toggle > i').click(function(){
var open = $(this).removeClass('fa-chevron-down').addClass('fa-chevron-up');
$.toggle('open');
});

toggleClass does that. If you start out with one class, that class will be removed (toggled) and the class the element doesn't have will be added, hence toggleClass
$('.accordion-toggle > i').click(function(){
var open = $(this).toggleClass('fa-chevron-down fa-chevron-up');
$.toggle('open');
});

You can check if it has a class first with:
if ($(this).hasClass("fa-chevron-down")) {
// add and remove classes
} else {
// add and remove classes
}
and then remove and add the appropriate classes in the if statement.

adding and removing the selected class to a parent div

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");