jQuery/css, show and hide divs based on radio button click

Question

From this question, i have tried to make something work, both in css and in jquery.

jQuery , show and hide divs based on radio button click

I have 4 radio-buttons:

  <div class="form-group">
  <label class="col-sm-4 control-label" for="date"></label>
    <div class="col-sm-8">
      <div class="input-group date">
        <input type="radio" name="rep" class="minimal">
        None
        <input type="radio" name="rep" class="minimal">
        Daily
      </div>
    </div>
  </div>

When the radio button to None is checked i would like this to be visibel:

  <div class="form-group">
  <label class="col-sm-4 control-label"></label>
    <div class="col-sm-8">
      <div class="input-group">
        Test None
      </div>
    </div>
  </div>

When the radio button to daily is checke, i would like this to be visibel:

  <div class="form-group">
  <label class="col-sm-4 control-label"></label>
    <div class="col-sm-8">
      <div class="input-group">
        Test Daily
      </div>
    </div>
  </div>

BTW, i have tried almost everything.

Sorry. I'm playing with php, but i just need a way to hide some parts that's only visibel when a radio button is checked. So one way or another is fine :) — DonWagner, Dec 13 '16 at 12:04

score 1 · Accepted Answer · answered Dec 13 '16 at 10:35

You need to bind the change event handler of radio element and establish relationship between :radio and div elements.

Script

var elems = $(':radio.minimal');
var continer = $('.radio-content');

elems.change(function() {                 
    //Hide all
    continer.hide();

    //Get Selected value
    var v = $(elems).filter(':checked').val();

    //Show the container
    continer.filter('[data-radio=' + v + ']').show();
}).change();

HTML, Here I have add the value property of radio elements

<input type="radio" name="rep" class="minimal" value="none" checked>None
<input type="radio" name="rep" class="minimal" value="daily">Daily

Here, data-* prefixed attribute added to establish relationship and added a common class radio-content to differentiate content container from other div element.

<div class="form-group radio-content" data-radio="none" style="display:none">
</div>
<div class="form-group radio-content" data-radio="daily" style="display:none">
</div>

var elems = $(':radio.minimal');
elems.change(function() {
  var v = $(elems).filter(':checked').val();
  var continer = $('.radio-content');
  //Hide all
  continer.hide();
  continer.filter('[data-radio=' + v + ']').show();
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label class="col-sm-4 control-label" for="date"></label>
  <div class="col-sm-8">
    <div class="input-group date">
      <input type="radio" name="rep" class="minimal" value="none" checked>None
      <input type="radio" name="rep" class="minimal" value="daily">Daily
    </div>
  </div>
</div>


<div class="form-group radio-content" data-radio="none" style="display:none">
  <label class="col-sm-4 control-label"></label>
  <div class="col-sm-8">
    <div class="input-group">
      Test None
    </div>
  </div>
</div>

<div class="form-group radio-content" data-radio="daily" style="display:none">
  <label class="col-sm-4 control-label"></label>
  <div class="col-sm-8">
    <div class="input-group">
      Test Daily
    </div>
  </div>
</div>

I found a problem. When i'm using: It's removing the design of my buttons. (using AdminLte) — DonWagner, Dec 13 '16 at 12:52

Nikhil Nanjappa · Answer 2 · 2016-12-13T10:46:37.293

1) Add some value to your radio buttons(to identify which radio is clicked)

<input type="radio" name="rep" class="minimal" value="None" checked>
None
<input type="radio" name="rep" class="minimal" value="Daily">
Daily

2) Mention a class to your show/hide divs to target them based on what is checked. Add a class hide as well which will hide the divs at start.

  <div class="form-group test-none hide">
  <label class="col-sm-4 control-label"></label>
    <div class="col-sm-8">
      <div class="input-group">
        Test None
      </div>
    </div>
  </div>
  <div class="form-group test-daily hide">
  <label class="col-sm-4 control-label"></label>
    <div class="col-sm-8">
      <div class="input-group">
        Test Daily
      </div>
    </div>
  </div>

Then you could use the following JQuery code to show/hide accordingly. By removing the class hide added earlier.

$(document).ready(function() {
    $('input[type=radio][name=rep]').change(function() {
      var radioValue = $(this).attr('value');
      if(radioValue == 'None') {
        $('.test-none').removeClass('hide');
      } else if(radioValue == 'Daily') {
        $('.test-daily').removeClass('hide');
      }
    });
});

score 0 · Answer 3 · answered Dec 13 '16 at 10:44

$(document).ready(function(){
  
  $('input:radio[name="rep"]').change(function(){
             if($(this).val()=="Daily")
             {
               $("#divDailySelect").show();
               $("#divNoneSelect").hide();
             }
             else if($(this).val()=="None")
             {
                 $("#divNoneSelect").show();
                 $("#divDailySelect").hide();
             }
    });
  
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.css" />
 <div class="form-group">
  <label class="col-sm-4 control-label" for="date"></label>
    <div class="col-sm-8">
      <div class="input-group date">
        <input type="radio" name="rep" class="minimal" value="None">
        None
        <input type="radio" name="rep" class="minimal" value="Daily">
        Daily
      </div>
    </div>
  </div>

<div class="form-group" id="divNoneSelect">
  <label class="col-sm-4 control-label"></label>
    <div class="col-sm-8">
      <div class="input-group">
        Test None
      </div>
    </div>
  </div>

<div class="form-group" id="divDailySelect" style="display:none;">
  <label class="col-sm-4 control-label"></label>
    <div class="col-sm-8">
      <div class="input-group">
        Test Daily
      </div>
    </div>
  </div>

score 0 · Answer 4 · answered Dec 13 '16 at 10:50

Here's the jsfiddle. All i did was added the class none to Test None and class daily to Test Daily.

The jQuery is as follows

$(document).ready(function () {
    $("input[name=none]").on('change', function() {     
    $('.none').show();
    $('.daily').hide();
  })
  $("input[name=daily]").on('change', function() {
    $('.none').hide();
    $('.daily').show();
  })
})

And the css is simply setting the default display to none

.daily {
  display: none;
}

.none {
  display: none;
}

jQuery/css, show and hide divs based on radio button click

4 Answers4