Develop Reference

accordion display to find the next div

Progress: https://jsfiddle.net/zigzag/jstuq9ok/4/
There are probably a few ways to do this but I have a class called sub that I add to hide a 'nested' Div and then use jQuery to toggle the Glyphicon along with display the 'nested' Div. Some asks:
$('.menu-toggle').click(function() {
$(this).find('span').toggleClass('glyphicon-menu-down').toggleClass('glyphicon-menu-up');
//How to do something like this to traverse the click and structure $(this).parent.find('.sub:first-child').toggle();
$('.sub').toggle();
$('.subsecond').toggle();
});
The nested team structure intended is this:
Adam
Lily
2.1 Sen
2.1.1 Tank
2.2 Another Sen
Justin
What I'm trying to do do is have this traverse through the DOM based on where the click happens to display the sub section under there. I have the content coming from a source system so can't hard code class directly.
Let me know if you have any question.

You can find the next div by using .closest('.row') to get the parent .row and .next('.row') to get the next .row of the parent .row if it has class or not using hasClass() so you can use
$('.menu-toggle').click(function(e) {
e.preventDefault(); // prevent <a> to redirect to the top of the page
$('.row:not(.sub):not(.subsecond)').not($('.sub').prev('.row')).not($('.subsecond').prev('.row')).not($(this).closest('.row')).find('span.glyphicon-menu-up').toggleClass('glyphicon-menu-down glyphicon-menu-up');
$(this).find('span').toggleClass('glyphicon-menu-down glyphicon-menu-up');
var Nextrow = $(this).closest('.row').next('.row'); // get the next row
if(Nextrow.hasClass('sub')){ // if next row has class sub
$('.sub').not(Nextrow).hide(); // hide all sub but not this one
Nextrow.slideToggle(function(){
if($(this).is(':hidden')){ // check if the .sub is hidden
$('.subsecond').hide(); // hide subsecond
$('span.glyphicon-menu-up').toggleClass('glyphicon-menu-down glyphicon-menu-up'); // toggle arrows to the down
}
}); // toggle this sub row
return false;
}
if(Nextrow.hasClass('subsecond')){ // if next row has class subsecond
$('.subsecond').not(Nextrow).hide(); // hide all subsecond but not this one
Nextrow.slideToggle(); // toggle this subsecond row
return false;
}
});
See Example

Toggling same class names except for one (JavaScript)

I am trying to prevent a paragraph element with a class attribute of 'show' from toggling away on the click event on updateButton. I've tried if else statements but to no avail.
I'm essentially trying to create an editing state when I click update button and all the text on the bottom of these buttons need to show (the paragraph elements). Though there is one button with text underneath it already which I want to prevent from toggling the class .hide.
The other buttons already have the .hide class attribute on them already so when toggled from the click event, they appear.
TLDR: I want to prevent the one paragraph element with no .hide class attribute from toggling it on when I toggle all the other paragraph elements in the .risk-text container.
// select indicator div
const riskIndicator = document.getElementById("Risk__indicator");
// select update button
const updateButton = document.getElementById("Update_button");
// Indicator buttons
const indicatorButton = document.getElementsByClassName("Risk_indicator_button");
// Indicator 'check every..' text
const checkIndicatorText = document.querySelectorAll(".risk-text");
// select update button
updateChange: updateButton.addEventListener("click", function (event) {
riskIndicator.classList.toggle("active");
});
// If statement to check whether the Risk Indicator is active to apply background changes
editState: updateButton.addEventListener("click", function(el) {
[].map.call(document.querySelectorAll('.risk-text'), function(el) {
// loop through text indicator elements checking to see if it's got a hidden class attribute
el.classList.toggle('hide');
});
});

Depending on your use case:
If you want to exclude it only once, and then toggle this element with others, do something like:
editState: updateButton.addEventListener("click", function(el) {
[].map.call(document.querySelectorAll('.risk-text:not(.hide)'), function(el) {
// loop through text indicator elements checking to see if it's got a hidden class attribute
el.classList.toggle('hide');
});
});
If you want to leave the "ember" element alone, then
editState: updateButton.addEventListener("click", function(el) {
[].map.call(document.querySelectorAll('.risk-text:not(.low_risk_text__wrap--risk-middle-amber)'), function(el) {
// loop through text indicator elements checking to see if it's got a hidden class attribute
el.classList.toggle('hide');
});
});
You can also add new class, like "spareMe", and exclude it with .not()

Conditional jQuery Toggle Function

I want to hide and show list items based on their attributed class.
The problem is that certain list items have multiple classes. So if I toggle one class then toggle another, any items with both selected classes will be removed.
I created a demo of my problem: http://jsfiddle.net/a4NkN/2/
Here's the JS CODE:
$('#easy').click(function(){
$(this).toggleClass( "checked" );
$('.easy').toggle();
});
$('#fun').click(function(){
$(this).toggleClass( "checked" );
$('.fun').toggle();
});
$('#silly').click(function(){
$(this).toggleClass( "checked" );
$('.silly').toggle();
});
If you select the "Easy" and "Fun" buttons, Boating will disappear.
How can I get Boating to stay?

This might be a good point to start from. Although you can do this cheaper and cleaner, that gives the idea:
Use an array to save the status of your selection buttons and one corresponding to hold the class names. Whenever your select buttons get clicked, you set all your elements invisible and reset those visible again, that are already selected by other buttons or the currently clicked, which is all saved in the switcher array.
//saves whether button is active
var switcher = [false, false, false];
//holds your classes selectable
var classes = ['easy', 'fun', 'silly'];
$('.toggler').click(function () {
// toogle the select button and save status
var x = $(this).hasClass('checked');
switcher[$(this).data('switch')] = !x;
$(this).toggleClass("checked", !x);
// iterate through your elements to set them active if needed
$('li').each(function () {
var cur = $(this);
cur.addClass('hidden');
$.each(switcher, function (index, data) {
if (data && cur.hasClass(classes[index])) {
cur.removeClass('hidden');
}
});
});
});
Whole solution in this fiddle: http://jsfiddle.net/BMT4x/

You cannot unconditionally toggle elements based on a click on one of the button filters if it is possible for an element to satisfy multiple filters at once. The correct approach is a little more involved.
Since your checked class means that only items corresponding to that button should be shown, do exactly this: toggle them based on the current status of the button. The items should be shown if and only if the corresponding button is checked as a result of clicking it.
$('#easy').click(function(){
$(this).toggleClass( "checked" );
$('.easy').toggle($(this).is(".checked"));
});
This code uses the last version of .toggle, the one accepting a boolean argument.
It can also be done more succintly:
$('.easy').toggle($(this).toggleClass( "checked" ).is(".checked"));

swap radios if selected using jquery

On clicking a radio button in radiogroup2, the selected radio should swap positions with the radio with the id='selectedradio'. fiddle http://jsfiddle.net/DCC66/6/ --- updated --- clear view of radio rows and code is swapping but cancelling out http://jsfiddle.net/DCC66/14/
tried this to sort the id issue: http://jsfiddle.net/DCC66/18/
$(".radiogroup2 input[type='radio']").on('click', function () {
$('#radioselected').closest('label').before($(this).closest('label'));
$(this).closest('label').after($('#radioselected').closest('label'));
$(this).attr('domaintype', 'radioselected');
$('radioselected').attr('radioselected', 'domaintype');
});
and now this:// swaps once then stops and then just makes the clicked radio disapear. think it needs to add the id="radioselected" to the newly swapped radio. also still not swapping though only replacing radio.
$(".radiogroup2 input[type='radio']").on('click', function ()
{
$('#radioselected').closest('label').replaceWith($(this).closest('label'));
});
trying using clone still no luck:
$("div.radiogroup2 input[name='domain_ext']").click(function ()
{
$(this).clone('#radioselected').after(this);
});
Original
$("div.radiogroup2 input[name='domain_ext']").click(function()
{
//only if a the radio in radiogroup to are clicked take radio and swap with id='radioselected'
if ($(this).prop('checked'))
{
$(this).after('#radioselected').add(this);
$('#radioselected').after(this);
}
});
so any radio clicked in the "swap" row should switch positions with the radio in the first row with the id 'selectedradio'

Use a delegate instead of binding the event on the radio buttons directly. That way the radio buttons that are swapped into the div will also work.
Use the closest method to get the label around the radio buttons.
Remove the id from the radio button that you swap with, and add it to the selected radio button.
Use the after method to move the label into the second list next to the selected one, then use prependTo to move the label with the selected radio button into the first list.
You have some invalid HTML code that makes the rows swap place. Change <td><tr> to <tr><td>.
$("div.radiogroup2").on("click", ":radio", function () {
var l = $(this).closest('label');
var r = $('#radioselected');
r.removeAttr('id');
l.after(r.closest('label'));
$(this).attr('id', 'radioselected');
l.prependTo('.radiogroup1');
});
Demo: http://jsfiddle.net/DCC66/16/

How to display buttons using $(this).show();

I have two grids, they both display buttons. One grid displays numbers, true or false and yes or no, and the other grid displays letters, true, false, yes and no.
The second grid is not displayed in the code (used css to not display second grid buttons (.answerBtns)).
Now I have included this in my code:
var clickedNumber = 10;
$('.answerBtns').each(function (index) {
if (index < clickedNumber) {
$(this).show();
}
});
Now what this does is no matter how which button I select in the first grid, it will always display 10 buttons. So what I need is clickNumber to be in a loop so it loops through the buttons, so if the user selects button "1" in first grid (the grid which you have to open using (Open Grid) link, then it should display the first button which is "A" in second grid, if user selects button "2" in first grid, then it should display the first two buttons "A" and "B" in second grid, if "3" then display "A", "B" and "C" and so on.
But also if user selects "True or False" button in first grid, it should display only "true" and "false" buttons in second grid and if user selects "yes or no" button in first grid, it should display "Yes" and "No" buttons only in second grid.
Does anyone know how to do this?
Thank you
Code is in jsfiddle, click here

If you add the following to the end of your buttonclick() function it will show or hide the appropriate number of buttons, as you can see in this updated jsfiddle.
$('.answerBtns').each(function (index) {
if (index < button.value)
$(this).show();
else
$(this).hide();
});
Note that that is basically the same as the snippet from your question except using the value from the clicked button instead of a hardcoded 10.
But more generally, if you're using jQuery then use jQuery. That is, don't put inline onclick handlers in every one of your buttons. They all just say onclick="buttonclick(this);", and they all have the same class, so you should remove those inline handlers from your HTML and set them up using jQuery.
So you could replace your buttonclick function with something like this:
$(".gridBtns").click(function() {
// what you need from your "buttonclick(button)" function should go here
// except instead of the "button" parameter you can just use "this",
// e.g., this.value
var clickedNumber = this.value;
$('.answerBtns').each(function (index) {
if (index < clickedNumber)
$(this).show();
else
$(this).hide();
});
});
I haven't got time to do the "yes or no" part for you, but perhaps you can figure it out from the above? Within the click handler you can test if (this.value==="yes or no") and so forth.