Need to show div based on enable radio button

[koder]

I have 2 radio buttons div structure below, I need to enable only one of them and also with selected radio button i ned to enable div’s
for ex: if input-cncstoreloc need to show ‘div1’ and need to hide ‘div2’(if div is in show mode) and if input-shipstoreloc is selected ‘div2’ should be enable need to hide ‘div2’(if div is in show mode)

Below are the custom css3 radio buttons(input type is hidden) and while selection i am adding one class radio_chk to show it is checked in span tag

  <div class="clickncollectstore" id="clickncollect_form">
    			   <input type="radio" id="cncstoreloc" name="cncstoreloc" check="" value="">
    			   <label for="cncstoreloc">Test</label>
    			  <span id="radio_check" class="check"></span>
    		   </div>
    		   
    		   <div class="shipcollectstore" id="shipncollect_form">
    			   <input type="radio" id="shipstoreloc" name="cncstoreloc" check="" value="">
    			   <label for="cncstoreloc">Test1</label>
    			  <span id="shippingradio_check" class="check"></span>
    		   </div>

	Tried below but not sure how to show the divs	   
		 
$('input[name="cncstoreloc"]').on('click', function(){
		$('input[name="cncstoreloc"]').find("span").removeClass('radio_chk');
		$(this).find("span").addClass('radio_chk');
});

[Paul_Wilkins]

Where do you want the div’s? Because if they are somewhere with the inputs, you can just use CSS to hide and show the divs.

.details {
  display: none;
}
:checked ~ .details {
  display: block;
  position: absolute;
  left: 1em;
  top: 4em;
}

<div class="clickncollectstore" id="clickncollect_form">
  <input type="radio" id="cncstoreloc" name="cncstoreloc" value="">
  <label for="cncstoreloc">Test</label>
  <span id="radio_check" class="check"></span>
  <div class="details">
  Click and collect from store.
  </div>
</div>

You can see an example at https://jsfiddle.net/fd4d1bka/1/

[koder]

The div’s not in the input they are at some other place in the page need to control them by these radio buttons. and also the div’s have different classes and id’s.

<div class="mydiv1"></div>
<div class="mydiv2"></div>

[Paul_Wilkins]

[quote=“koder, post:3, topic:230401, full:true”]
The div’s not in the input they are at some other place in the page need to control them by these radio buttons. and also the div’s have different classes and id’s.[/quote]

Good one. First up you’ll want to hide those divs when the page loads. We can use a data-details attribute on each radio button so that we can loop through them and hide those divs. A nice thing about this is that when the radio button changes, we can easily update the appropriate divs.

<div id="mydiv1">Div 1</div>
<div id="mydiv2">Div 2</div>

$("[name='cncstoreloc']").each(function () {
  var id = $(this).data("details");
  $("#" + id).hide();
});

The appropriate divs are now hidden. When the radio button is changed, if the radio button is currently selected we want to show it’s appropriate div, and otherwise we want to hide it. This can be quite easily done with:

$("[name='cncstoreloc']").on("change", function () {
  var id = $(this).data("details");
  if ($(this).is(":checked")) {
    $("#" + id).show();
  } else {
    $("#" + id).hide();
  }
});

Putting it all together we get:

$("[name='cncstoreloc']").each(function () {
  var id = $(this).data("details");
  $("#" + id).hide();
})
.on("change", function () {
  var id = $(this).data("details");
  if ($(this).is(":checked")) {
    $("#" + id).show();
  } else {
    $("#" + id).hide();
  }
});