Develop Reference

Jquery Show or hide content block on click on checkbox

I have several checkboxes when clicking on a certain checkbox, I want to show some content (in my case, this is a simple block for an example) when clicking on another checkbox, the previous block should hide and display a new block, I think to solve this problem you need to apply forEach checkboxes work for me, but I cannot display blocks
<div class="toggle-two">
<div><small>content 1</small></div>
<label class="switch-label">
<input class="switch" id="switch-novice" value="switch-novice" type="checkbox"/>
<span class="slider round"></span>
</label>
</div>
<div class="toggle-three">
<div><small>content 2</small></div>
<label class="switch-label">
<input class="switch" id="switch-intermediate" value="switch-intermediate" type="checkbox"/>
<span class="slider round"></span>
</label>
</div>
<div class="toggle-four">
<div><small>content 3</small></div>
<label class="switch-label">
<input class="switch" id="switch-expert" value="switch-expert" type="checkbox" />
<span class="slider round"></span>
</label>
</div>
<!-- ------------------------------------------- -->
</div>
<div>
<div class="content c1"></div>
<div class="content c2"></div>
<div class="content c3"></div>
</div>
**script.js**
let uploadPres = document.getElementsByClassName("content");
$(".content").each(function (index, value) {
$(`.switch:not([checked])`).on("change", function (param1, param2) {
$(".switch").not(this).prop("checked", false);
if ($(".switch").is(":checked")) {
console.log(this.checked);
}
});
});
Initially a class named content has display: none by default
You can also see this example in codesandbox

on each input checkbox add the reference of the associated content div like below.
<input class="switch" id="switch-novice" value="switch-novice" type="checkbox" data-content="c1"/>
OR
<input class="switch" id="switch-novice" value="switch-novice" type="checkbox" data-content="c2"/>
Now simply update your code like below.
$(`.switch`).on("change", function (a, b) {
$(".switch").not(this).prop("checked", false);
if ($(".switch").is(":checked")) {
var contentToOpen = $(this).data("content"); // read the associated class of the div
$(`.content`).hide(); // hide all existing opened ones
$(`.${contentToOpen}`).show(); // show the associated one
}
});

function toggle(event){
var container = event.target.closest(".togglers");
var currentContainer = event.target.closest(".toggle");
var index = Array.from(container.children).indexOf(currentContainer);
var checkboxes = document.querySelectorAll(".toggle input");
$(checkboxes).prop("checked",false);
$(event.target).prop("checked", true);
var contentItems = document.querySelectorAll(".content-items .content");
$(contentItems).hide();
var content = contentItems[index];
$(content).slideToggle();
}
.content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="togglers">
<div class="toggle"><input type="checkbox" onclick="toggle(event)" />
toggle 1
</div>
<div class="toggle"><input type="checkbox" onclick="toggle(event)" />
toggle 2
</div>
<div class="toggle"><input type="checkbox" onclick="toggle(event)" />
toggle 3
</div>
</div>
<div class="content-items">
<div class="content">Content 1</div>
<div class="content">Content 2</div>
<div class="content">Content 3</div>
</div>

Fade in and out between images without white space

I know this question has been asked before — I've truly done my best to try to make use of the responses — but I just cannot for the life of me figure out how to map the responses onto my own code. (Relatively new to coding, so I am having difficulty reverse-engineering the responses to code that is quite different from my own.)
I'm trying to fade between image1 and image2 on load, but I keep getting the white space in between.
https://jsfiddle.net/68xsn01r/4/
<div id="container1" class="container">
<img class="image1" src="https://i.imgur.com/XJZvyAh.jpg" alt="Mandarinazul" width="100%" height="100%" />
<img class="image2" src="https://i.imgur.com/7iOp5Xc.jpg" alt="Mandarinazul" width="100%" height="100%" />
<span id="wrapper">
→
</span>
</div>
JQuery:
$("#container1").fadeIn("fast",function(){
$(".image2").fadeIn("slow", function(){
$(".image1").fadeIn("slow", function(){
});
});
});
I am trying to work this out as part of a project. What changes do I need to make to my JS Fiddle?

Use On click function jquery and then use Radio button to select the image so that on click radio button according to selected radio button jquery fade in or out the image.
<div class="color-choose">
<div>
<input data-image="red" type="radio" id="red" name="color" value="red" checked>
<label for="red"><span></span></label>
</div>
<div>
<input data-image="blue" type="radio" id="blue" name="color" value="blue">
<label for="blue"><span></span></label>
</div>
<div>
<input data-image="black" type="radio" id="black" name="color" value="black">
<label for="black"><span></span></label>
</div>
</div>
and images are look like this
<div class="left-column">
<img data-image="black" src="abc.jpg"
alt="">
<img data-image="blue" src="abd.jpg" alt="">
<img data-image="red" class="active" src="abs.jpg" alt="">
and script
<script>
$(document).ready(function() {
$('.color-choose input').on('click', function() {
var headphonesColor = $(this).attr('data-image');
$('.active').removeClass('active');
$('.left-column img[data-image = ' + headphonesColor +
']').addClass('active');
$(this).addClass('active');
});
});
</script>
and use jquery cdn too

Showing a div when radio button selected

I am creating a list of radio button selections for an order form. Each of the questions has an answer that contains a div with additional information. I have them all set up to show the div when the radio button is clicked, but when you go to the next question and click an option, it hides the above answer and unselects the radio button for the previous question.
Edit To Clarify: Only one of the radio button options should bring up the additional info box per question. So if you click yes to question 1, you get an info box. If you click NO on question 1, there is no info box.
I would like the previous radio buttons to stay selected. I started with this code and modified it to have multiple questions:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css" media="screen">
.hide{
display:none;
}
</style>
</head>
<body>
<div id="tabs">
<div id="nav">
<p>Show Div 1:<input type="radio" name="tab" value="pkfrom" class="div1" /></p>
<p>Show Div 2:<input type="radio" name="tab" value="pkfrom" class="div2" /></p>
</div>
<div id="div1" class="tab">
<p>this is div 1</p>
</div>
<div id="div2" class="tab">
<p>this is div 2</p>
</div>
</div>
<script type="text/javascript" charset="utf-8">
(function(){
var tabs =document.getElementById('tabs');
var nav = tabs.getElementsByTagName('input');
/*
* Hide all tabs
*/
function hideTabs(){
var tab = tabs.getElementsByTagName('div');
for(var i=0;i<=nav.length;i++){
if(tab[i].className == 'tab'){
tab[i].className = tab[i].className + ' hide';
}
}
}
/*
* Show the clicked tab
*/
function showTab(tab){
document.getElementById(tab).className = 'tab'
}
hideTabs(); /* hide tabs on load */
/*
* Add click events
*/
for(var i=0;i<nav.length;i++){
nav[i].onclick = function(){
hideTabs();
showTab(this.className);
}
}
})();
</script>
</body>
</html>
Here is the jsfiddle: https://jsfiddle.net/lenniejane/d58phaua/

First you need to put different names of radio buttons, I also made some changes in html :
<div id="tabs">
<div class="nav">
<p><strong>QUESTION 1</strong></p>
<div class="answers">
<p><input name="tab" type="radio" value="residential-yes">Yes</p>
<p><input name="tab" type="radio" value="residential-no">No</p>
</div>
<div class="tab" id="div1">
<p class="fee-notice">ADDITIONAL INFO 1</p>
<p>ZZZZZZZZZZZZZZZZZ</p>
</div>
</div>
<br>
<div class="nav">
<p><strong>QUESTION 2</strong></p>
<div class="answers">
<p><input name="tab2" type="radio" value="lift-yes">Yes</p>
<p><input name="tab2" type="radio" value="lift-no">No</p>
</div>
<div class="tab" id="div2">
<p class="fee-notice">ADDITIONAL INFO 2</p>
<p>ZZZZZZZZZZZZZZZZZ</p>
</div>
</div>
<br>
<div class="nav">
<p><strong>QUESTION 3</strong></p>
<div class="answers">
<p><input name="tab3" type="radio" value="inside-yes">Yes</p>
<p><input name="tab3" type="radio" value="inside-no">No</p>
</div>
<div class="tab" id="div3">
<p class="fee-notice">ADDITIONAL INFO 3</p>
<p>ZZZZZZZZZZZZZZZZZ</p>
</div>
</div>
<br>
<div class="nav">
<p><strong>QUESTION 4</strong></p>
<div class="answers">
<p><input name="tab4" type="radio" value="inside-yes">Yes</p>
<p><input name="tab4" type="radio" value="inside-no">No</p>
</div>
<div class="tab" id="div4">
<p class="fee-notice">ADDITIONAL INFO 4</p>
<p>ZZZZZZZZZZZZZZZZZ</p>
</div>
</div>
</div>
css :
.tab {
display: none;
}
.nav.showtab .tab{
display:block;
}
and js will be like this :
var inputsEle = document.getElementsByTagName('input');
var navEle = document.getElementsByClassName('nav');
for(i=0; i<inputsEle.length; i++){
inputsEle[i].addEventListener("change", function(e){
var thiisNav = e.target.parentElement.parentElement.parentElement;
diplayNewTab(thiisNav)
});
}
function diplayNewTab(thiisNav){
for(i=0; i<navEle.length; i++){
navEle[i].classList.remove("showtab");
}
thiisNav.className += ' showtab';
}
https://jsfiddle.net/d58phaua/2/
UPDATE:
if you need to keep the "additional info" for previous questions visible when answering another question use this js :
var inputsEle = document.getElementsByTagName('input');
var navEle = document.getElementsByClassName('nav');
for(i=0; i<inputsEle.length; i++){
inputsEle[i].addEventListener("change", function(e){
var thiisNav = e.target.parentElement.parentElement.parentElement;
thiisNav.className += ' showtab';
});
}
Demo : https://jsfiddle.net/d58phaua/3/

https://jsfiddle.net/d58phaua/1/
Here you go.
You just need to put different names of radio buttons
<input name="tab1" type="radio" value="residential-no">No</p>

Several triggers not fully working and code is extra long

I have a page that has 7 image boxes, these boxes are alert boxes for our customers agents for any type of alerts being sent out. I have them all set as a link, when clicked the box turns from orange to blue and an information box is opened next to it, each image has its own info box. I have it partially working but it is not function how I want. I need it so if box1 is opened and the user clicks box2 the box1 should revert back to orange and its info box needs to close so that box2's info box can populate the space. Right now the image boxes stay blue when you click on other boxes and the code I have to close the info boxes is bugging out if you click off another image box. Here is part of my code and my HTML:
(Update) Here is a jsbin link of my example as it should be working. However, the click event is not working on my system, its not even trying to scroll to the top of teh page which normally happens when the trigger breaks but the href=# is there. Here is my new code:) JSBin
//JS
$(document).ready(function () {
function assignClickHandlerFor(boxNum) {
$('#a' + boxNum).click(function (evt) {
// returning false at the end implictly does these two lines.
evt.preventDefault();
evt.stopPropagation();
var $aBox = $(evt.currentTarget); // points to the element
(ie, the link) clicked.
// locate the div that has both the `.active` class and the `.alertBox2` class
var $prevAlert = $('.alertBox2.active');
$prevAlert.find('.blue').hide();
$prevAlert.find('.orange').show();
$prevAlert.removeClass('active');
$('.alertDetails').hide();
$abox.find('.blue').show();
$abox.find('.orange').hide();
$abox.addClass('active');
// show the required alert.
$('#d' + boxNum).show();
});
}
var i;
for (i = 1; i <= 7; i++) {
assignClickHandlerFor('Box' + i);
}
});
//CSS
.alertBox2
{
float:left; display:block;
}
.alertDetails
{
display:none; background-color:#fff; width:250px; height:585px; float:left; position:relative; left:5px; top:8px;
}
//HTML
<div><a href="#" id="aBox1" class="alertBox2" >
<span class="infoBox orange">
<img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
</span>
<span class="infoBox blue" style="display: none;">
<img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
</span>
</a>
</div>
<div><a href="#" id="aBox2" class="alertBox2">
<span class="infoBox orange">
<img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
</span>
<span class="infoBox blue" style="display: none;">
<img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
</span>
</a></div>
<div><a href="#" id="aBox3" class="alertBox2">
<span class="infoBox orange">
<img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
</span>
<span class="infoBox blue" style="display: none;">
<img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
</span>
</a></div>
</div>
<p id="alertDP">Click on any Alert to the left to see details</p>
<div class="alertDetails" id="dBox1">
Box1
</div>
<div class="alertDetails" id="dBox2">
Box2
</div>
<div class="alertDetails" id="dBox3">
Box3
</div>

Edit: A link demonstrating my understanding of your issue. http://jsbin.com/ecelil/1/edit
A few observations, clicking on any one aBox only toggles its own infoBox. In the click handler for aBox2 you seem to have noticed that and tried to fix it by passing three infobox selectors to jQuery. However jQuery doesn't work that way. It accepts only one selector. That selector can however match those three elements.
Replace the first line of each of the three aBox click handlers with $('.infoBox1, .infoBox2, .infoBox3').toggle();
As for the code being too long, well, for loops, variables and css class selectors are your friends :)
$(document).ready(function () {
function assignClickHandlerFor(boxNum) {
$('#a' + boxNum).click(function (evt) {
// returning false at the end implictly does these two lines.
evt.preventDefault();
evt.stopPropagation();
var $aBox = $(evt.currentTarget); // points to the element (ie, the link) clicked.
// locate the div that has both the `.active` class and the `.alertBox2` class
var $prevAlert = $('.alertBox2.active');
$prevAlert.find('.blue').hide();
$prevAlert.find('.orange').show();
$prevAlert.removeClass('active');
$('.alertDetails').hide();
$aBox.find('.blue').show();
$aBox.find('.orange').hide();
$aBox.addClass('active');
// show the required alert.
$('#d' + boxNum).show();
});
};
var i;
for (i = 1; i <= 7; i++) {
assignClickHandlerFor('Box'+i);
}
});
// css
.blue-info-box {
background-image: url('Images/blue_alert_box.jpg');
}
.orange-info-box {
background-image: url('Images/orange_alert_box.jpg');
}
// html
<div>
<a href="#" id="aBox1" class="alertBox2" >
<span class="infoBox orange">
<img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
</span>
<span class="infoBox blue" style="display: none;">
<img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
</span>
</a>
</div>
<div>
<a href="#" id="aBox2" class="alertBox2">
<span class="infoBox orange">
<img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
</span>
<span class="infoBox blue" style="display: none;">
<img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
</span>
</a>
</div>
<div>
<a href="#" id="aBox3" class="alertBox2">
<span class="infoBox orange">
<img src="Images/orange_alert_box.jpg" alt="Orange Info Box" />
</span>
<span class="infoBox blue" style="display: none;">
<img src="Images/blue_alert_box.jpg" alt="Blue Info Box" />
</span>
</a>
</div>
<div class="alertDetails" id="dBox1">
Box1
</div>
<div class="alertDetails" id="dBox2">
Box2
</div>
<div class="alertDetails" id="dBox3">
Box3
</div>

how to display some information of image in another div by clickin on image with jQuery?

how to display some information of image in another div by clicking on image and information should be shown/hidden as clicking on this image.
$(document).ready(function () {
$(".cell").click(function () {
$(this).find("span").toggle("slow");
})
});
<div class="cell">
<div class="inner">
<span style="display:none;"> <img src="Images/sachin.jpg" alt="" width="180" height="180" /></span> <span class="name">Sachin Tendulkar</span>
<input type="hidden" class="friend_id" value="22 " />
</div>
</div>
I want that name displayed in another div when i click on particular image

If I'm understanding correctly, I think what you're asking is for the name to be displayed when you click on its image?
$(document).ready(function () {
$(".inner>img").click(function () {
$(this).parent().find("span").toggle("slow");
})
});
​<div class="cell">
<div class="inner">
<img src="Images/sachin.jpg" alt="" width="180" height="180" />
<span class="name" style="display: none;">Sachin Tendulkar</span>
<input type="hidden" class="friend_id" value="22 " />
</div>
</div> ​​​​​​​​​​​​​
Take notice of the reformatted html that removes the span around the image (it's not necessary) and the style attributes of your image and name span.

Try:
$(.cell).click(function() {
$(this).toggle("slow");
$(otherDiv).html( $(this).find('span.name').html() );
// other processing ...
});
But this is for your current code, which should be cleaned up a bit. So see below.
You shouldn't need a span to wrap your image. I would try something more along the lines of:
<div class="cell">
<div class="inner">
<img src="Images/sachin.jpg" data-name="Sachin Tendulkar" alt="" />
<input type="hidden" name="22" class="friend_id" value="22" />
</div>
</div>
Along with:
$('.cell').click(function() {
var img = $(this).find('img');
$(img).toggle('slow');
$(otherDiv).html( $(img).attr('data-name') );
// other processing ...
});