We Keep Coding

On click Add / Remove Class and Add / Remove Values for one set of DIVs at a time

I am working on a wordpress website using Generate Press and Super forms. The website is https://ibsolutions.biz/piesarul.
The super form is used in a page called configurator to create a custom request for quotation form.
I got it to work up to the point where the user can toggle buttons and checkboxes show up based on whether the buttons are toggled on/off.
However, I want to make it so when a toggle button is on the others are off. I tried my luck with this bit of code:
$(".super-toggle-switch").click(function(event){
$(this).addClass("super-active")
.siblings()
.removeClass("super-active");
});
It didn’t work out. Any suggestions on how to improve it?
What currently happens is that when the toggle switch is turned on, the div with the super-toggle-switch class is also assigned the class ‘super active’.
Additionally, when the button is toggled on, a subordinated div called super-shortcode-field is assigned the value “on” and when toggled off, it is assigned the value “off”.
Basically, what I am hoping to achieve is that both the value of super-shortcode-field and the class assignment are triggered for only one of the toggle buttons at a time.
Right now, the user has to toggle the buttons both on and off manually, and I want to eliminate that extra step for them.
Being at the beginning of my JS and JQuery journey, I would appreciate any and all help :)

I don't know about jQuery, stopped using it 7 years ago. In pure Javascript, this is very easy:
const switches = document.querySelectorAll('.super-toggle-switch');
for (const switch of switches) {
switch.addEventListener('click', toggleSwitches)
}
function toggleSwitches(event) {
for (const switch of switches) {
switch.classList.toggle('super-active', switch === event.target);
}
}

Making a button disabled if 'this' class is true

I'm working on this app that allows you to add people from an API to a list in the app. Every time a person is added, a new Bootstrap card is created. I'm trying to figure out how to make the button to click "Watch Stream" disabled under certain circumstances. If the user is "LIVE" then the class .popover_status_on is added to the parent element. If the user is "OFFLINE" then the class .popover_status_off is added instead.
I thought this was going to be a quick fix issue but I'm seeming to have much more trouble with it than I expected. Right now this is what I'm looking at with my code that isn't working which I definitely thought it would have:
if($('.card > .card-body > h2').hasClass('popover_status_off')) {
$('.card > .card-body > button').prop('disabled', true);
} else {
return;
}
I realize that when it gets disabled, it disables all the buttons, even "LIVE" ones. So I'm trying to figure out if there's a way without specifying by class/id that I can have it change the state of the button. I thought maybe using "this" would work but I'm unsure what code would work for that.
Thanks for any feedback.

The problem is that inside your if statement, the jQuery selector isn't constrained to THAT card, it's finding all buttons inside all cards.
What your code literally says:
If there is card containing an h2 with class popover_status_off
Then find all cards that have buttons and disable them
Else do nothing
Try this:
$('.card h2.popover_status_off').parents('.card').find('button').prop('disabled', true);
You don't need the if statement. One of the great powers of jQuery is that you can identify an element and change it all in a single statement.

how to know which 'a href' link was clicked from previous webpage?

I'm kind of new here but I've regularly visited Stack Overflow to refer to stuff I've found myself wanting to ask (I tend to find 99.9% of what I'm asking has already been 'asked' on here heh)
but I wonder if this has.
I have a home page which has two div elements (styled as boxes with transition effects that reveal a styled a href link of their own).
basically these are links to tabbed content on the about us page.
first button has been assigned the id of learn-more-1 and the other learn-more-2. Observe below:
<a id="#learn-more-1" href="about-us.html#company-history"/>
<a id="learn-more-1" href="about-us.html#why-choose-us"/>
about-us.html has a tab container with two divs that are assigned the id's:
#company-history and #why-choose-us
and below these we have our content (a heading with the paragraphs containing respective info).
The issue I am having is, when ever we click either href link on the home page (styled as buttons btw..) we reach the about-us page no problem. Its that the tab container HOUSES the tab buttons but we don't see them. The tabbed content that's shown starts from the Heading.
I'm at wits end trying to understand what I'm missing.
My question is, Is there a way for me to use jQuery on the about-us page, i.e:
$document.ready(function() {
* psuedo code here *
if the user arrived here via clicking learn-more-1 button
make the tab button #company-history ACTIVE
and scroll up 50px ( so we can see the damn button as it only shows
us the heading and paragraph content of the tab container..)
else if the user arrived here having clicked learn-more-2 button,
make the tab button #why-choose-us ACTIVE
and scroll up 50px
};
Here's the thing, by default #our-company-history, On the about-us page is active. Meaning if you just visited about-us you will see that the tabbed container shows you the company history. So nothing is hidden.
Is there a way to perhaps, write a function that simply passes an argument to the about-us.html that will allow us to KNOW which a href ref button link was clicked so we can then work with it? Or am I over complicating something really simple here?
Would appreciate some direction here folks cheers!
EDIT:
Marat I HAVE to know if either a href link was clicked in the home page ! This way, and only this way do i show them the tabbed container and the content under the active tab. Make sense ? What you are proposing will fire automatically each time user clicks on the about-us.html page and show the tabbed container by default. NOT what we're gunning for my friend. So you see, I NEED a way to conditionally check IF the user arrived to the about-us.html page via either of those two a href links (from home page) and then open the respective tabbed content accordingly. BTW, currently when either a href link (styled as buttons) gets clicked in the home page, they DO arrive on the about-us page and onto the tabbed container but are unable to see the active and non active tab. This is all thats the issue.

Some code to show you algoritm
$(document).ready(function() {
var tabId = window.location.hash; // get id of destination tab
if(tabId) {
$("#our-company-history").hide(); // hide default tab
var tab = $(tabId); // get destination tab
$(window).scrollTop(tab.offset().top); // scroll to destination tab
tab.show(); // display tab-content
}
});

How do I allow users to close a slide using this JQuery example?

I would like to get users to sign up to my email newsletter without using annoying popups.
I discovered a scroll-activated JQuery slide that I think will work well.
Here is the test example I created: (scroll down to activate it)
http://buckinvestor.com/test/jquerytest.html
Now here is the problem: I don't want to annoy users by constantly having this slide down on each page.
How do I add a "Close" button to the slide?
How do I ensure that the user doesn't see the slide again after they click close? (perhaps a cookie that stays active for 7 days or something?, not sure how that works, but if you provide me some guidance, I'll figure it out).
Thank you everyone - StackOverflow has been such a lifesaver!

Easy
you just need to hide the DIV
in this example add a button or image and use the live('click',function(){})
$('#closediv').live('click',function(){
$('#headerSlideContainer').hide();})
as for the second part of the question yes cookie

For #1, just add a button and
$("button.hide").click(function(event){ $("div.hidethis").hide() });
onclick to hide the div that is the slide thing.

Add a <a> or <button> or something for the close button inside of the #headerSlideContent <div>
Add a on click or similar to the button inside your load function:
$('#closeButton').click(function(){
$('#headerSlideContainer').hide();
});
http://api.jquery.com/hide/
For part 2, yes a cookie is good, I found the jQuery cookie plugin to be helpful: http://plugins.jquery.com/project/Cookie
Set the cookie: $.cookie("name", "value");
Read the cookie: var value = $.cookie("name");

tab menu + accordion menu assign classes

I have asked question about these two menus before, but the subject was a bit different, for now, all i want is to upgrade the previous code written here: accordion, tab menus, assign select class for both so that the class open_menu doesnt disappear after i click the link in it's sub menu, u can easily understand it from this script: http://jsfiddle.net/bq6tA/11/ in comments i tried to reply the man who wrote this script, but he didn't reply, but i really need to modify this script, right now, and thx for help everyone!
btw, if i refresh the page, the classes are assigned ok, once i click the sub menu link, the class open_menu for top menu link disappear.

Line 86 of tabcontent.js is looping through every item in your list structure and removing all styling classes if they're not the currently selected item:
this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : ""
Add an additional click binder to reapply it for each lowest level item:
$("ul.reset a").click(function() {
$(this).closest("ul").siblings("a").addClass("open_menu");
});
See a working demo here.

Can you simply remove the .removeClass('open_menu') from the code?