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

Is there a way to add a javascript button that would remove an added graph

Dear StackOverflow Users
I am currently working on a data analysis web app.
Now in this app you can drag and drop graphs and you can remove it by unselecting it. Also you can add the graph with a plus button. Only problem is there is no way to unselect it when you add it by that plus button(Which I put the code of ""$("#tb_add").button"" )
What I am trying to do is find a way to write a function button that would undo what the add graph button did, or close it or delete it, since there is no unselect button.
My question is: "Is there such a javascript function that would undo or remove what the $("#tb_add").button did.
so let's say I want to add a button called $("#tb_remove").button
is there any simple javascript that would simply undo what was added ?
If there is what is it called ? can you direct me to it ?
Thank you

In your click handler you could add a way to remove the section. jQuery has a .remove() function. You could use classes to control it as well.
if($(this).hasClass("added")){
$(this).removeClass("added");
$("panel selector").remove();
$(this).addClass("removed");
} else {
analysis.addPanel();
$(this).removeClass("removed");
$(this).addClass("added");
}
something along those lines should help you.

close select2 dropdown via javascript/jquery

Good day, How can I properly close a select2 dropdown via jquery or javascript??
for now Im using select2-dropdown.toggle() to close it,
but I noticed that It will simply hide the list and the select2 box is still being highlighted
I want to lost focus it or something like that just to close it properly and be able to come up with a result like this one .
by the way the screen shots are dark because those select2 boxes are under a bootstrap modal that would come up whenever I press enter.
Any advice would really be appreciated! Thanks in advance

I know this is an old question but in order to do this using the API you would simply do the following:
Select2 API
$("#select2-drop-mask").select2("close");
The question also mentions bootstraps modal dialog which tends to be a reason why people want to close it programmatically.
For anyone's info this is how you do that:
Bootstrap 3
$('#myModal').on('hidden.bs.modal', function () {
$('#select2-drop-mask').select2("close");
})
Bootstrap 2
$('#myModal').on('hidden', function () {
$('#select2-drop-mask').select2("close");
})

In v4.0, none of the other answers worked for me. Using jQuery to select just the mask had no effect. I had to use the id of the select box itself:
$("#mySelectElement").select2("close")
This also worked, but may not be preferred:
$("#mySelectElement").select2().trigger("select2:close");
Documentation
Also, for Bootstrap 3, the hidden.bs.modal event was too late and the select2 mask would linger for a second during the animation. The hide.bs.modal worked a little smoother for us:
$('#modalYourModal').on('hide.bs.modal', function () {
//close select2 in case its open
$("#mySelectElement").select2("close");
});

this one works for me $("#select2-drop-mask").click();

The select2-dropdown-*mask* didn't work for me, but the below did.
$('#select2-drop').select2('close');

To close all in Bootstrap version 4 and above. Try:
$('body').trigger('mousedown');

All select2 elements has class select2-hidden-accessible. So we can use this class in selector and close all of them
$('.select2.select2-hidden-accessible').select2('close');
or try to close only one of them with id selector.

select2-dropdown.blur();
I think this is what you're looking for.
Here you have an example in JSFiddle created by me just now.

JS library show/hide element on checkbox status

I'm fairly new to JS and am trying to write my own library using this blog post, and would like a hand. (Apologies if this is too vague for an SO question)
I'm trying to write a function that shows or hides a queried element based on the status of a queried checkbox (and another for a radio button if I can't do it in one method) on a form.
So I'm looking to end up with something like this:
$(divId).checkToggle(checkBoxId);
So the div will start as hidden. When the checkbox is clicked, the div will toggle to visible. When the checkbox is unchecked, I'd like the div to hide again and any input fields inside it to be cleared (the probably will be only one input field).
I know that this function isn't really going to be very combine-able or reusable, but I would use it so often for just that one thing that I'm going to overlook it.
Okay, enough preamble. Here's what I have so far.
Could I have some suggestions on how to change/finish my checkToggle method? Thanks!

This worked for me:
$(document).ready(function(){
$('#checkbox1').change(function() {
if($(this).attr('checked')) {
$("#myDiv").slideDown(1000);
}
else
{
$('#myDiv').slideUp(1000);
}
});
});

Input Box Option Drop Down

I'm looking at creating something like this:
http://konigi.com/interface/kontain-search
alt text http://s3.amazonaws.com/konigi/interface/kontain-search-2.png
I don't suppose anyone has any resources which could guide me? I know I'm not giving much information but I wouldn't know where to start looking.
Cheers!
EDIT Sorry, I meant just the drop down / input box, nothing else on that site.
EDIT AGAIN The drop down list is inside of the input box, hence why I was wondering.

It may be something similar to these examples but with only one main item. and manipulate with jquery each "li" and that action taken
example 1 |
example 2 |
example 3 |
example 4
edition answer: this is done with css.
is all contained in a div -> input + menu.
for the input is removed border styles and background color is the same as the container div.

Well, you put part of the search form in a hidden div and pop it up when the user clicks or hovers on some other element, either inside or outside the form. Use CSS as needed to position the div. Not really sure what problems you could possibly have with something like this.
Maybe you can be more specific and break this problem down in several more focused questions?

I did not drill into the site, but from a logical standpoint, perhaps the search box AND the dropdown are "inside" another element (div?) that forms the complex control...and just formated(CSS)/actions(jQuery) placed on those.
<div id="searchDiv">
<div id="searchText"></div>
<div id="searchDropdown"></div>
<div id="searchButton"><div>
</div>
Easy enough to set somthing like that up.

I think what's going on there isn't that the dropdown is inside an input box, but rather that the input box chrome is hidden and it's placed inside an input-looking div along with the dropdown.