1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How To Target Only The Current Div That Has Target Element

Discussion in 'jQuery' started by macaela, Aug 29, 2016.

  1. #1
    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:

    SEMrush
     
    macaela, Aug 29, 2016 IP
    SEMrush
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    724
    Best Answers:
    152
    Trophy Points:
    470
    #2
    You're targeting all with the class, so of course it does. Instead, use something like $(this).parent('.radio-single').find(whatever) do stuff
     
    PoPSiCLe, Aug 29, 2016 IP
  3. macaela

    macaela Active Member

    Messages:
    181
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #3
    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):
     
    macaela, Aug 29, 2016 IP
  4. macaela

    macaela Active Member

    Messages:
    181
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #4
    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):
     
    macaela, Aug 29, 2016 IP
  5. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    724
    Best Answers:
    152
    Trophy Points:
    470
    #5
    PoPSiCLe, Aug 29, 2016 IP
    qwikad.com likes this.
  6. macaela

    macaela Active Member

    Messages:
    181
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #6
    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
     
    macaela, Aug 30, 2016 IP
  7. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,851
    Likes Received:
    1,084
    Best Answers:
    22
    Trophy Points:
    400
    #7
    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):
     
    qwikad.com, Aug 30, 2016 IP
  8. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    724
    Best Answers:
    152
    Trophy Points:
    470
    #8
    Okay? It works fine here in Chrome on Android - which browser doesn't it work in?
     
    PoPSiCLe, Aug 30, 2016 IP
  9. NaughtySpider

    NaughtySpider Peon

    Messages:
    10
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    3
    #9
    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:
     
    Last edited: Sep 12, 2016
    NaughtySpider, Sep 12, 2016 IP
  10. designoneweb

    designoneweb Greenhorn

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #10
    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.
     
    designoneweb, Feb 21, 2017 IP
  11. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    724
    Best Answers:
    152
    Trophy Points:
    470
    #11
    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 $)
     
    PoPSiCLe, Feb 21, 2017 IP
  12. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,912
    Likes Received:
    1,624
    Best Answers:
    232
    Trophy Points:
    515
    #12
    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.
     
    Last edited: Mar 11, 2017
    deathshadow, Mar 11, 2017 IP