Question 36441 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to hide-show multiple divs using jQuery?

Alright, so I want to show two divs when selecting on of the options in my selector.

This is what I have currently, works great and hiding and showing elements based on option selected. But doesnt work If i want 2 divs to show on based on sections. Help would be much appreciated.

$(function() {
  $('#colorselector').change(function() {
    $('.colors').hide();
    $('#' + $(this).val()).show();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<Select id="colorselector">
  <option value="red">Red</option>
  <option value="yellow">Yellow</option>
  <option value="blue">Blue</option>
</Select>
<div id="red" class="colors" style="display:none"> red... </div>
<div id="yellow" class="colors" style="display:none"> yellow.. </div>
<div id="blue" class="colors" style="display:none"> blue.. </div>
Tags:

2

Answers


  1. 0

    Not sure what 2 div’s you want to show, but hes an example. I’ve switch out id for a command class by color:

    $(function() {
  $('#colorselector').change(function() {
    $('.colors').hide();
    $('.colors.' + $(this).val()).show();
  });
});

    Demo

    $(function() {
  $('#colorselector').change(function() {
    $('.colors').hide();
    $('.colors.' + $(this).val()).show();
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<Select id="colorselector">
  <option value="red">Red</option>
  <option value="yellow">Yellow</option>
  <option value="blue">Blue</option>
</Select>
<div class="colors red" style="display:none"> red... </div>
<div class="colors yellow" style="display:none"> yellow.. </div>
<div class="colors blue" style="display:none"> blue..1 </div>

<div class="colors blue" style="display:none"> blue..2 </div>
    Login or Signup to reply.
  2. 0

    If you want to hide/show more than one element then you should work with class names instead of IDs:

    $(function() {
  $('#colorselector').change(function() {
    $('.colors').hide()
    if (this.value>"") $('.colors.'+this.value).show();
  });
});
    .colors {font-weight:900; padding:10px; color: white}
.red {background-color:red}
.yellow {background-color:yellow; color:black;}
.blue {background-color:blue}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<Select id="colorselector">
  <option value="">select a color ...</option>
  <option value="red">Red</option>
  <option value="yellow">Yellow</option>
  <option value="blue">Blue</option>
</Select>
<div class="red colors" style="display:none"> red... </div>
<div class="yellow colors" style="display:none"> yellow.. </div>
<div class="blue colors" style="display:none"> blue.. </div>
<h2>Another section with further divs</h2>
<div class="red colors" style="display:none">more red... </div>
<div class="yellow colors" style="display:none">and yellow.. </div>
<div class="blue colors" style="display:none">or even blue.. </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search