Show hide multiple divs based on select value

Question

Looking for some jQuery to help hide and reveal content in a simple form I'm creating.

Picking options 1-3 in the select field should show one of the three data response divs as well as reveal the content in the rest of the form (data-form-order 2).

I think data attributes would be a good route to go down but a little unsure of where to start.

<form>
  <div data-form-order="1">

    <div id="opening-question">
      <select id="select-box">
      <option value="0">- please select -</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    </div>

    <div data-response="op1">
      This is content for option 1.
    </div>
    <div data-response="op2">
      This is content for option 2.
    </div>
    <div data-response="op3">
      This is content for option 3.
    </div>
  </div>

  <div data-form-order="2" id="other-questions">
    Rest of form content. This area should show when option values 1-3 are selected in the select field.
  </div>
</form>

Answer 1

Really all you need is to hide all the divs using some CSS by default, and then use the change function to get the value and select the div based on that value:

 $('#select-box').change(function(){ var selectVal = $(this).val(); $('.content, #other-questions').hide(); $('.content[data-response="op' + selectVal + '"], #other-questions').show(); }); 

 .content, #other-questions { display: none; } 

 <script src="//code.jquery.com/jquery-3.2.1.min.js"></script> <form> <div data-form-order="1"> <div id="opening-question"> <select id="select-box"> <option value="0">- please select -</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> </div> <div class="content" data-response="op1"> This is content for option 1. </div> <div class="content" data-response="op2"> This is content for option 2. </div> <div class="content" data-response="op3"> This is content for option 3. </div> </div> <div data-form-order="2" id="other-questions"> Rest of form content. This area should show when option values 1-3 are selected in the select field. </div> </form> 

I've updated my answer to include classes which are better for selecting elements than data attributes.

Answer 2

I highly recommend reading Decoupling Your HTML, CSS, and JavaScript . You can make some really simple and reusable jQuery that does some pretty cool stuff, without a lot of duplicate code or tightly coupled code. The following is very extensible, reusable, easy to read and maintain.

 $(document).ready(()=>{ $('.js-revealer').on('change', function(){ var $select = $(this); var $selected = $select.find('option:selected'); var hideSelector = $selected.data('r-hide-target'); var showSelector = $selected.data('r-show-target'); $(hideSelector).addClass('is-hidden'); $(showSelector).removeClass('is-hidden'); }); }); 

 .is-hidden{ display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <div data-form-order="1"> <div id="opening-question"> <select id="select-box" class="js-revealer"> <option value="0" data-r-show-target="" data-r-hide-target=".opt-1, .opt-2, .opt-3, .opt-other">- please select -</option> <option value="1" data-r-show-target=".opt-1, .opt-other" data-r-hide-target=".opt-2, .opt-3">Option 1</option> <option value="2" data-r-show-target=".opt-2, .opt-other" data-r-hide-target=".opt-1, .opt-3">Option 2</option> <option value="3" data-r-show-target=".opt-3, .opt-other" data-r-hide-target=".opt-1, .opt-2">Option 3</option> </select> </div> <div data-response="op1" class="opt-1 is-hidden"> This is content for option 1. </div> <div data-response="op2" class="opt-2 is-hidden"> This is content for option 2. </div> <div data-response="op3" class="opt-3 is-hidden"> This is content for option 3. </div> </div> <div data-form-order="2" id="other-questions" class="opt-other is-hidden"> Rest of form content. This area should show when option values 1-3 are selected in the select field. </div> </form> 

Answer 3

I would suggest using classes for this, there is no need for data attributes.

 $(function() { $('#select-box').change(function(){ if($('#select-box').val() == '1') { $('.response1').show(); $('.response2').hide(); $('.response3').hide(); $('#content').show(); } else if($('#select-box').val() == '2') { $('.response1').hide(); $('.response2').show(); $('.response3').hide(); $('#content').show(); } else if($('#select-box').val() == '3') { $('.response1').hide(); $('.response2').hide(); $('.response3').show(); $('#content').show(); } }); }); 

 .response1, .response2, .response3 { display: none; } #content { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <div data-form-order="1"> <div id="opening-question"> <select id="select-box"> <option value="0">- please select -</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> </div> <div class='response1' data-response="op1"> This is content for option 1. </div> <div class='response2' data-response="op2"> This is content for option 2. </div> <div class='response3' data-response="op3"> This is content for option 3. </div> </div> <div id='content' data-form-order="2" id="other-questions"> Rest of form content. This area should show when option values 1-3 are selected in the select field. </div> </form> 

Answer 4

I have shown show/hide using Class . Initially hide all div's , shown on drop down selection (only matches div).Here is how.I have created two classes hide to hide the element and show to show the element.

 $('[data-response^=op]').attr('class',"hide");//Initially set all div hidden $("#select-box").on("change",function(){ var value = $(this).val(); if(value !="" && value<=3 && value !=0){ console.clear();// to clear older logs. console.log('Selected value'+$(this).val()); $('[data-response^=op]').attr('class',"hide");//On change hide all div's var selector = "op"+value; $(document).find("[data-response='"+selector+"']").attr('class',"show"); $("#other-questions").attr('class',"show");//Show matching div. }else{ $("#other-questions").attr('class',"hide"); $('[data-response^=op]').attr('class',"hide"); } }) 

 .hide{ display:none; } .show{ display:block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <div data-form-order="1"> <div id="opening-question"> <select id="select-box"> <option value="0">- please select -</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> </div> <div data-response="op1"> This is content for option 1. </div> <div data-response="op2"> This is content for option 2. </div> <div data-response="op3"> This is content for option 3. </div> </div> <div data-form-order="2" id="other-questions" class="hide"> Rest of form content. This area should show when option values 1-3 are selected in the select field. </div> </form>