We Keep Coding

State dependent class names on accordion

So I have this problem that I guess is a walk in the park to fix.
I'm using the JS snippet below on a website I'm building and what the snippet does is it creates accordions for some HTML elements where the class .bapf_head is the header (control) of the accordion and the .bapf_body is the expand/collapse.
I wrote the if logic where the function checks if the .bapf_body is opened or not and will then add or remove a class to the .bapf_head depending on the state. This then results in a +/- symbol that indicates open/close depending on the state.
So the problem is that I have multiple Div's that uses the same class names and all of them gets updated with the .open class name when one of the accordions are opened or closed. So let's say I have three accordions and I open one of them, then all three gets the class .open added and hence all gets the '-' symbol even though only one accordion is open.
Anyone knows how to make sure only the clicked accordion gets the updated class-name rather then all of the accordions at the same time?
Code below;
jQuery(document).ready(function($) {
$(".bapf_head").click(function () {
$header = $(this);
$content = $header.next();
$content.slideToggle(300, function () {
$header.text(function () {
if ($content.is(":visible")) {
$(".bapf_head").addClass("open");
} else {
$(".bapf_head").removeClass("open");
};
});
});
});
});

if ($content.is(":visible")) {
$(this).addClass("open");
} else {
$(this).removeClass("open");
};
you need to reference the event-related DOM element, not select all the ones with that class
also, .click() is long deprecated afaik, you should use .on('click', ...

Active class not working properly

I have some menu items and in the menu I have a plus(+) sign. When I click on the plus sign it should add a class and look like cross. It is happening but when I click the cross sign it does not removing the sign so that I can get the plus sign again.
$(document).ready(function(){
$('.nav-link').click(function(){
$('.nav-link').removeClass('addplus');
$(this).addClass('addplus');
});
});
Here is the Example.

The issue is because you are always removing, then immediately adding the class back on the clicked element. To fix this exclude the current element from the removeClass() call using not(), then use toggleClass() to add/remove the class to the required element, like this:
$('.nav-link').click(function() {
$('.nav-link').not(this).removeClass('addplus');
$(this).toggleClass('addplus');
});
Updated fiddle

I've gone a bit around about the houses here, but this works using parent and siblings:
$('.nav-link').click(function() {
$(this).parent(".nav-item").siblings().children(".nav-link").removeClass('addplus');
$(this).toggleClass('addplus');
});
I wouldn't do a blanket removeClass across all matching elements like you've done, I'd pick them out by excluding the currently matched element. Revised fiddle: https://jsfiddle.net/epqxb6L7/5/

It's because your code is removing and adding the same class every time click event triggers. Try something like this
$(document).ready(function(){
$('.nav-link').click(function(){
$(this).toggleClass('addplus'); //THIS WILL ADD/REMOVE CLASS ALTERNATIVELY
});
});

You always add the class addplus in the last line of your click handler. Try the following instead:
$(document).ready(function(){
$('.nav-link').click(function(){
if ($(this).hasClass('addplus')) {
$(this).removeClass('addplus');
} else {
$(this).addClass('addplus');
}
});
});

Javascript - How to remove all active classes unless the element being clicked on already has a active class

const offCanvasLinks = document.querySelectorAll('.off-canvas__link');
[].forEach.call(offCanvasLinks, function(link) {
link.addEventListener('click', (event) => {
const typeVal = link.getAttribute('data-type')
if (typeVal === "star") {
document.querySelector('[data-star-links]').classList.toggle('active');
} else if (typeVal === "how-to") {
document.querySelector('[data-how-to]').classList.toggle('active');
} else {
document.querySelector('[data-presenters]').classList.toggle('active');
}
})
});
I have the above code that clicks on a navigation to toggle a class of active.
If I click on another element in the navigation I need to remove all active classes unless the clicked on element already has a active class.
In Jquery this is super easy with the ability to use .not(). Where you can just past through the event target to check and remove all other active classes.
So to make this more clear what I'm looking for is a way to remove all active classes unless the element being clicked has already got an active class.
Let me know your thoughts
*********** UPDATE ******************
Ok...
Click on a link at the bottom it'll show a screen nicely if you then click on another link it will close the previous one then open the next one. HOWEVER if you click on the same link it does not close the menu.
how do I remove the class if it is already open?
Link: https://jsfiddle.net/2oqm0r2n/3/

maybe something like this?
for example:
// unless the clicked on element has already an active class
if(!link.classList.contains('active')){
// remove all active classes
var actives = document.querySelectorAll('.active');
[].forEach.call(actives, function(elem) {
elem.classList.remove("active");
});
}

If I understand correctly, you want to toggle the active class of the element corresponding to the clicked item, and you want to remove the active class from all other elements.
This you can do as follows:
if (typeVal === containerVal) {
container.classList.toggle('active')
} else {
container.classList.remove('active')
}
See your updated fiddle
Or in one "line":
container.classList.toggle('active', typeVal === containerVal &&
!container.classList.contains('active'));
...in this fiddle

Jquery Function add class and remove class on multiple buttons but only execute specific button clicked

Hello I seem to be stuck on this certain code. I have multiple buttons on my website that when you click one, it changes classes & the text inside then revert back after clicking again. It seems to only work on one button but there are multiples of buttons with the same ID & when they are clicked nothing happens. Heres the codeenter code here
$('#btnInfo').click(function()
{
if ($(this).text() == "More Info")
{
$(this).text("Cancel").addClass('btn-danger');
}
else
{
$(this).text("More Info").removeClass('btn-danger');
};
});
Im not to sure only one button gets the function while the others stay the same when i click them but I want all the buttons to execute the code above but onlt to the button i specifically clicked with the ID

First, you cannot have more than one element with the same "ID", so use class instead.
I think what you want is to bind the event click to all your buttons, do this instead.
$('.className').on('click', function(e){
if ($(this).text() == "More Info")
{
$(this).text("Cancel").addClass('btn-danger');
}
else
{
$(this).text("More Info").removeClass('btn-danger');
};
});
Check the link for more info : http://api.jquery.com/on/

It's unclear what you are looking exactly
If you are looking for this functionality for all the buttons, you need something like this.
$('button').click(function() //see changed css selector
{
if ($(this).text() == "More Info")
{
$(this).text("Cancel").addClass('btn-danger');
}
else
{
$(this).text("More Info").removeClass('btn-danger');
};
});

Your selector is an id #btnInfo in the below line
$('#btnInfo').click(function()
This will select only one button. Use a class, .btnInfo and add it as class attribute to the buttons

Toggle class on div = Untoggle class on another div

I have some divs (#div1, #div2, #div3) that change appearence on click, they toggle a class using this script:
$(document).ready(function() {
$("#parent_div").on('click', '.current_class', function () {
$(this).toggleClass("new_class");
});
});
Now I want the the divs to be unable to toggle at the same time, so they work kinda like a radio-button with same "name".
Example: Imagine three divs that looks the same (default class), then you click on one of the divs (example #div1) and that one toggles a new class and change appearence. Now you click on one of the other two and this one also change appearence (toggle class), at the same time when this one change appearence #div1 changes back to the default class.
So there can only be one div of those three that toggles the new class at once.
Is this possible?

You first need to remove the class from all the divs, and then add it to the current one. Try this:
$("#parent_div").on('click', '.current_class', function () {
$('#parent_div .new_class').removeClass('new_class'); // remove exisiting
$(this).addClass("new_class"); // add to current
});
Update
Added functionality to remove class from current:
$("#parent_div").on('click', '.current_class', function () {
var $this = $(this);
if (!$this.hasClass('new_class')) {
$('#parent_div .new_class').removeClass('new_class');
$this.addClass("new_class");
}
else {
$this.removeClass("new_class");
}
});

Use:
$(document).ready(function() {
$("#parent_div").on('click', '.current_class', function (){
if($(this).hasClass('.new_class')){
$(this).removeClass('.new_class');
}else {
$('.new_class').removeClass('.new_class');
$(this).addClass('.new_class');
}
});
});
Updated: Code now allows for toggling of current element with class .new_class.

This would be possible, but you'll need to reset all the other divs manually.
An example would be :
I have 3 divs available with id's div-1, div-2 and div-3.
I'm using a default class 'default' and a definition class so i can click them 'clickable', and my other class would be 'selected'.
To implement this you would need to do the following:
$(document).ready(function() {
$('#parent-div').on('click, 'clickable', function() {
$('.selected').removeClass("selected").addClass("default");
$(this).addClass("selected");
})
});
I hope this helps.
I didn't have the possibility to check if the syntax is exactly correct, but I believe this does the job as required.
Kind regards,
NDakotaBE