Hi I have a multiple div class (radio-single) each containing a radio button with class (red) that when click expands a div with class (red), the problem is that it expands all other divs with class (red) I only want to expand the div class (red) within its container class (radio-single). <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style type="text/css"> .box{ padding: 20px; display: none; margin-top: 20px; border: 1px solid #000; } .red{ background: #ff0000; } .green{ background: #00ff00; } .blue{ background: #0000ff; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript"> jQuery(function($) { $('input[type="radio"]').click(function(){ if($(this).attr("class")=="red"){ $(".box").not(".red").hide(); $(".red").show(); } if($(this).attr("class")=="green"){ $(".box").not(".green").hide(); $(".green").show(); } if($(this).attr("class")=="blue"){ $(".box").not(".blue").hide(); $(".blue").show(); } }); }); </script> </head> <body> <div> <div class="radio-single"> <label > red</label> <input class="red" type="radio" name="colorRadio" value="red"> <div class="red box">You have selected <strong>blue radio button</strong> so i am here</div> </div> <br /> <div class="radio-single"> <label>green</label> <input class="green" type="radio" name="colorRadio" value="green"> <div class="green box">You have selected <strong>green radio button</strong> so i am here</div> </div> <br /> <div class="radio-single"> <label>blue</label> <input class="blue" type="radio" name="colorRadio" value="blue"> <div class="blue box">You have selected <strong>blue radio button</strong> so i am here</div> </div> <br /> <div class="radio-single"> <label > copy</label> <input class="red" type="radio" name="colorRadio" value="red"> <div class="red box">You have selected <strong>blue radio button</strong> so i am here</div> </div> </div> </body> </html> HTML:
You're targeting all with the class, so of course it does. Instead, use something like $(this).parent('.radio-single').find(whatever) do stuff
Hi where would i add the $(this).parent so target only the div red of that particular div where the container is? if($(this).attr("class")=="red"){ $(".box").not(".red").hide(); $(".red").show(); } Code (JavaScript): Would it be if($(this).parent.attr("class")=="red"){ $(".box").not(".red").hide(); $(".red").show(); } Code (JavaScript):
Hi I managed to get it to only show the div (red) that contains the radio that its clicked, but the problem is when i click on another radio button it doesnt hide the previous clicked any idea how do i get to close any other that is open? jQuery(function($) { $('input[type="radio"]').click(function(){ if($(this).attr("class")=="red"){ $(".box").not(".red").hide(); $(this).parents(':eq(1)').find(".red").show(); } if($(this).attr("class")=="green"){ $(".box").not(".green").hide(); // $(".green").show(); } }); Code (markup):
Here you go: https://jsfiddle.net/syds259w/ I think that's what you wanted? Much simpler code as well, and I fixed some minor issues
Thats exactely what I wanted so much simplier thank you very much. if is not pusshing too much any idea why it doesnt work on mobile phone, specially windows does mobile doesnt accept $('input[type="radio"]').click(function(){ Code (JavaScript): once again thanks
Just saw this example. Pure javascript: http://jsfiddle.net/cqscc48g/136/ CSS/HTML <style type="text/css"> .colorDiv{ width:50px; height:50px; background-color:red; } </style> <input id="select1" name="test" type="radio" checked /> <label for="select1">Red</label> <input id="select2" name="test" type="radio" /> <label for="select2">Green</label> <input id="select3" name="test" type="radio" /> <label for="select3">Blue</label> <input id="select4" name="test" type="radio" /> <label for="select4">Orange</label> <div class="colorDiv"></div> Code (markup): JAVASCRIPT: <script type='text/javascript'>//<![CDATA[ function ChangeColor(color) { var clrDiv = document.getElementsByClassName("colorDiv")[0]; clrDiv.style.backgroundColor = color; } document.getElementById("select1").onclick = function() { ChangeColor(""); } document.getElementById("select2").onclick = function() { ChangeColor("green"); } document.getElementById("select3").onclick = function() { ChangeColor("blue"); } document.getElementById("select4").onclick = function() { ChangeColor("orange"); } //]]> </script> Code (markup):
In current example all you need to do it just show .box block that is next to your radio button: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style type="text/css"> .box{ padding: 20px; display: none; margin-top: 20px; border: 1px solid #000; } .red{ background: #ff0000; } .green{ background: #00ff00; } .blue{ background: #0000ff; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script type="text/javascript"> jQuery(function($) { $('input[type="radio"]').click(function() { // hide all boxes $('.box').hide(); // show only sibling $(this).siblings('.box').show(); }); }); </script> </head> <body> <div> <div class="radio-single"> <label>red</label> <input class="red" type="radio" name="colorRadio" value="red"> <div class="red box">You have selected <strong>blue radio button</strong> so i am here</div> </div> <br> <div class="radio-single"> <label>green</label> <input class="green" type="radio" name="colorRadio" value="green"> <div class="green box">You have selected <strong>green radio button</strong> so i am here</div> </div> <br> <div class="radio-single"> <label>blue</label> <input class="blue" type="radio" name="colorRadio" value="blue"> <div class="blue box">You have selected <strong>blue radio button</strong> so i am here</div> </div> <br> <div class="radio-single"> <label > copy</label> <input class="red" type="radio" name="colorRadio" value="red"> <div class="red box">You have selected <strong>blue radio button</strong> so i am here</div> </div> </div> </body> </html> HTML:
Would something like this work with addClass / removeClass also? I'm a javascript noob and can't find a way to make this Codepen (http://codepen.io/designoneweb/pen/OWYpZG) simpler. I'm having to use distinct DIV id's. A .parent function would make it much simpler and allow me to easily integrate this into a WordPress loop.
It should - also, remember that it's possible to make distinct id's, but attach one event to all of those IDs - something like this: <div id="id_1"></div> <div id="id_2"></div> <div id="id_3"></div> Code (markup): Then you can attach an event to all of those IDs, like this: $('[id^=id_]').on('click',function(e) { $(this).addClass('something').removeClass('somethingelse'); } Code (markup): This can also be used in CSS (the selector) to assign values to given classes or IDs (specially autogenerated ones, where you have some similar patterns either in the beginning, as here, or at the end (if on the end, you switch the ^ to $)
1) where are your FOR attributes to associate your LABEL with your input. 2) If the text is scripting only, why the **** is it in the markup? 3) Though if you're going to put it in the markup, why the HELL are you using jquery to do CSS' job. Are you REALLY that worried about IE8/earlier support?!? This is a STUNNING example of both JavaScript for NOTHING and everything wrong with jQuery! Particularly with the endless pointless classes for nothing when you've got a perfectly good outer DIV wrapping everything... that should PROBABLY be a fieldset in side a FORM in production, NOT a DIV. In that same way those BR for nothing really put the herp in that there derp. minor nitpick, valid DOCTYPE might help too since legacy UA's only recognize uppercase for the <!DOCTYPE part. Also this is 2017, you don't need to say type="text/css" on <style> or type="text/javascript" on <script> anymore. We're DONE with that nonsense. (that was never ACTUALLY necessary) Not quite sure why you're trying to set background-color on the inputs either since radio's usually don't accept that. <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"> <link rel="stylesheet" href="screen.css" media="screen,projection,tv" > <title>Radio :checked demo</title> </head><body> <fieldset class="colorRadioSet"> <div class="red"> <label for="color_red">red</label> <input type="radio" name="colorRadio" id="color_red" value="red"> <p>You have selected <strong>red radio button</strong> so i am here</p> </div> <div class="green"> <label for="color_green">green</label> <input type="radio" name="colorRadio" id="color_green" value="green"> <p>You have selected <strong>green radio button</strong> so i am here</p> </div> <div class="blue"> <label for="color_blue">blue</label> <input type="radio" name="colorRadio" id="color_blue" value="blue"> <p>You have selected <strong>blue radio button</strong> so i am here</p> </div> <div class="red"> <label for="color_red2">red</label> <input type="radio" name="colorRadio" id="color_red2" value="red"> <p>You have selected <strong>red radio button</strong> so i am here</p> </div> </fieldset> </body></html> Code (markup): With this for the screen media CSS: .colorRadioSet { border:0; padding:0; margin:0; } .colorRadioSet div { padding:1.25em; margin-top:1.25em; border:1px solid #000; } .colorRadioSet p { display:none; } .colorRadioSet input:checked + p { display:block; } .red p { background:#F00; } .green p { background:#0F0; } .blue p { background:#55F; } Code (markup): No stinking JavaScript or ignorant dumbass halfwit bloated train-wreck of asshattery known as jQuery needed. Even if you were to script it for legacy browsers (IE8/earlier) you hook the radio buttons off their parent fieldset (I'd probably swap to a ID instead of class at that point to make hooking it easier) and in the event for each one use event.currentTarget.nextElement (or a nextSibling polyfill equivalent) to find the P you want to manipulate... instead of that constant ignorant moronic "let's use querySelector for EVERYTHING" garbage jQuery dupes nubes and rubes into using. Basically though, NOT even JavaScript's job anymore -- and even if it were it isn't something you'd hard code for each and every blasted radio button directly. Handle the event and originator (target), don't derp it with jQ's halfwit handling. The three things people use jQuery for -- stuff that would be simpler without it, stuff that's CSS' job, and stuff than has no business on websites in the first place. You've got a nasty mix of the first two, and the third may apply.