Jquery - Show and Hide Divs based on radio selection

Tapash
September 30, 2023
135 views
5 votes
5 Answers

By default custom_2, custom_3, custom_4 divs should remain hidden.

Only If "Radio 1" is selected div id "custom_2" is shown
Only If "Radio 2" is selected div id "custom_3" is shown
Only If "Radio 3" is selected div id "custom_4" is shown
I also have other divs within the same parent DIV like custom_5, custom_6. These should NOT be affected.

I have tried below but it’s not working. Can anyone help please? Here is the jQuery:

CRM.$(function ($) {
  $("input[name$='custom_1']").click(function () {
    var test = $(this).val();
    $("#custom_2").hide();
    $("#custom_3" + test).show();
  });
});

And here is the HTML:

    <div class="ShowHide">
      Radio 1 <input type="radio" name="custom_1" value="1" id="CIVICRM_QFID_1 " /> 
Radio 2 <input type="radio" name="custom_1" value="2" id="CIVICRM_QFID_2" /> 
Radio 3 <input type="radio" name="custom_1" value="3" id="CIVICRM_QFID_3" />

      <div id="custom_2" class="crm-section custom_2-section form-item">Radio 1 Selected</div>
      <div id="custom_3" class="crm-section custom_3-section form-item">Radio 2 Selected</div>
      <div id="custom_4" class="crm-section custom_4-section form-item">Radio 3 Selected</div>
      <div id="custom_5" class="crm-section custom_5-section form-item"></div>
      <div id="custom_6" class="crm-section custom_6-section form-item"></div>
</div>

Thanks.

Answers

you can do this by hiding all divs using a class and then showing the div you want using id, here is an example

html:

<div id="ShowHide">
        Radio 1 <input type="radio" name="custom_1" value="1" id="CIVICRM_QFID_1 " />
        Radio 2 <input type="radio" name="custom_1" value="2" id="CIVICRM_QFID_2" />
        <div id="custom_1" class="radio-div">Radio 1 Selected</div>
        <div id="custom_2" class="radio-div">Radio 2 Selected</div>
    </div>

js:

<script src="jquery.js"></script>
<script>
    $('.radio-div').hide()
    $("input[name$='custom_1']").on('click', (e) => {
        $('.radio-div').hide()
        $("#custom_" + $(e.currentTarget).val()).show()
    })
</script>

You can try show/hide based on clicked radio buttons like the following way:

$(document).ready(function(){
  //set the first radio button as checked by default
  $("#ShowHide input[type='radio'][name='custom_1']:first").prop("checked", true);

  //hide all divs with 'id' startinging with 'custom_' except the first one
  $("#ShowHide div[id^=custom_]:not(:first)").hide();
  
  //handle click events on radio buttons
  $("#ShowHide input[type='radio'][name='custom_1']").click(function() {
     //get the selected radio button's value and increment it by 1
     var selectedValue = Number($(this).val()) + 1;
     
     //hide all divs with 'id' containing 'custom_'
     $("#ShowHide div[id*=custom_]").hide();
     
     //construct the selector for the div to show
     var selector = "#custom_" + selectedValue;
     
     //show the selected div
     $(selector).show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div id="ShowHide">
      Radio 1 <input type="radio" name="custom_1" value="1" id="CIVICRM_QFID_1 " /> 
Radio 2 <input type="radio" name="custom_1" value="2" id="CIVICRM_QFID_2" /> 
Radio 3 <input type="radio" name="custom_1" value="3" id="CIVICRM_QFID_3" />

      <div id="custom_2" class="crm-section custom_2-section form-item">Radio 1 Selected</div>
      <div id="custom_3" class="crm-section custom_3-section form-item">Radio 2 Selected</div>
      <div id="custom_4" class="crm-section custom_4-section form-item">Radio 3 Selected</div>
      <div id="custom_5" class="crm-section custom_4-section form-item"></div>
      <div id="custom_6" class="crm-section custom_4-section form-item"></div>
</div>

Assuming that the DIV element to be displayed has an ID with an integer suffix greater than the value of the radio button being checked one could, using vanilla JS, accomplish the show/hide like this:

/*
  a delegated event handler bound to the parent container (edited question, edited parent)
  will process "change" events on all radio buttons within
  that parent element.
  
  DIV elements are selected in relation to this parent
  element only.
*/
document.addEventListener('change',e=>{
  if( e.target instanceof HTMLInputElement && e.target.type=='radio' ){
    /*
      find the numeric value of the radio button (event.target)
      and increment by one
    */
    let i=Number( e.target.value );
        i++;
    /*
      create the suitable ID or className attribute
      used to identify the DIV element
    */
    let id=`#custom_${i}`;
    /*
      If the DIV exists, hide all previously displayed DIV elements
      and show the relevant content
    */
    let div=e.target.parentNode.querySelector( id );
    if( div ){
      e.target.parentNode.querySelectorAll('div').forEach(div=>div.style.display='none');
      div.style.display='block';
    }
  }
});

.ShowHide{
  margin:1rem 0;
  padding:1rem;
  border:1px dotted grey
}

.ShowHide > div{
  display:none;
}

<div class="ShowHide">

  Radio 1 <input type="radio" name="custom_1" value="1" id="CIVICRM_QFID_1 "/>
  Radio 2 <input type="radio" name="custom_1" value="2" id="CIVICRM_QFID_2" />
  Radio 3 <input type="radio" name="custom_1" value="3" id="CIVICRM_QFID_3" />
  Radio 4 <input type="radio" name="custom_1" value="4" id="CIVICRM_QFID_4 "/>
  <div id="custom_2">Radio 1 Selected</div>
  <div id="custom_3">Radio 2 Selected</div>
  <div id="custom_4">Radio 3 Selected</div>
  <div id="custom_5">Radio 4 Selected</div>
  <div id="custom_6">Radio 5 Selected - will not be shown</div>
  <div id="custom_7">Radio 6 Selected - neither will this</div>
</div>


<div class="ShowHide">
  Radio 23 <input type="radio" name="custom_2" value="23" id="CIVICRM_QFID_23 "/>
  Radio 24 <input type="radio" name="custom_2" value="24" id="CIVICRM_QFID_24" />
  Radio 25 <input type="radio" name="custom_2" value="25" id="CIVICRM_QFID_25" />
  <div id="custom_24">Radio 23 Selected</div>
  <div id="custom_25">Radio 24 Selected</div>
  <div id="custom_26">Radio 25 Selected</div>
  <div id="custom_27">Radio 27 Selected - will not be shown</div>
  <div id="custom_29">Radio 28 Selected - neither will this</div>
</div>

The following approach uses the relationship between the values of the radio buttons (1, 2, 3) and the position of the <div> elements to be shown or hidden.

function toggle(val) {
  $("#ShowHide div").each(function(i) {
    if (i + 1 === val) $(this).show();
    else $(this).hide();
  });
}
$("input[name$='custom_1']").click(function() {
  toggle(Number($(this).val()));
});
toggle(0); // hide all initially

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ShowHide">
  Radio 1 <input type="radio" name="custom_1" value="1" id="CIVICRM_QFID_1 " />
  Radio 2 <input type="radio" name="custom_1" value="2" id="CIVICRM_QFID_2" />
  Radio 3 <input type="radio" name="custom_1" value="3" id="CIVICRM_QFID_3" />
  <div id="custom_2" class="crm-section custom_2-section form-item">Radio 1 Selected</div>
  <div id="custom_3" class="crm-section custom_3-section form-item">Radio 2 Selected</div>
  <div id="custom_4" class="crm-section custom_4-section form-item">Radio 3 Selected</div>
</div>

Here’s a CSS solution using the functional :has() pseudo-class:

.crm-section {
  display: none;
}

:has(#CIVICRM_QFID_1:checked) #custom_2,
:has(#CIVICRM_QFID_2:checked) #custom_3,
:has(#CIVICRM_QFID_3:checked) #custom_4{
  display: block;
}

<div class="ShowHide">
  <label>Radio 1 <input type="radio" name="custom_1" value="1" id="CIVICRM_QFID_1"></label>
  <label>Radio 2 <input type="radio" name="custom_1" value="2" id="CIVICRM_QFID_2"></label>
  <label>Radio 3 <input type="radio" name="custom_1" value="3" id="CIVICRM_QFID_3"></label>

  <div id="custom_2" class="crm-section form-item">Radio 1 Selected</div>
  <div id="custom_3" class="crm-section form-item">Radio 2 Selected</div>
  <div id="custom_4" class="crm-section form-item">Radio 3 Selected</div>
  <div id="custom_5" class="crm-section form-item">Some other DIV 1</div>
  <div id="custom_6" class="crm-section form-item">Some other DIV 2</div>
</div>

and another one using ~ general sibling combinator selector

.crm-section {
  display: none;
}

#CIVICRM_QFID_1:checked ~ #custom_2,
#CIVICRM_QFID_2:checked ~ #custom_3,
#CIVICRM_QFID_3:checked ~ #custom_4{
  display: block;
}

<div class="ShowHide">
  Radio 1 <input type="radio" name="custom_1" value="1" id="CIVICRM_QFID_1">
  Radio 2 <input type="radio" name="custom_1" value="2" id="CIVICRM_QFID_2">
  Radio 3 <input type="radio" name="custom_1" value="3" id="CIVICRM_QFID_3">

  <div id="custom_2" class="crm-section form-item">Radio 1 Selected</div>
  <div id="custom_3" class="crm-section form-item">Radio 2 Selected</div>
  <div id="custom_4" class="crm-section form-item">Radio 3 Selected</div>
  <div id="custom_5" class="crm-section form-item">Some other DIV 1</div>
  <div id="custom_6" class="crm-section form-item">Some other DIV 2</div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – Show and Hide Divs based on radio selection

Answers