filter div

by matts213

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">


  <form class="form">
    <div class="form-group">
      <label for="selectList">Filter Divs</label>
      <select id="selectList" class="form-control">

        <option value="1" id="lAll" selected="selected">Show All</option>


        <option value="2" id="lOne">One</option>
        <option value="3" id="lTwo">Two</option>
        <option value="4" id="lThree">Three</option>
        <option value="5" id="lFour">Four</option>

      </select>
    </div>


  </form>
</div>
<div class="filterDiv container">
  <div id="block-1">
    <h1> Div One</h1>
  </div>
  <div id="block-2">
    <h1> Div Two</h1>
  </div>
  <div id="block-3">
    <h1> Div Three</h1>
  </div>
  <div id="block-4">
    <h1>Div Four</h1>
  </div>
</div>

CSS

.filterDiv div {
  border: solid 1px;
  margin-top: 10px;
}

.filterDiv h1 {
  text-align: center;
}

JavaScript

$('#selectList').change(function() {
  $('#block-1').hide();
  $('#block-2').hide();
  $('#block-3').hide();
  $('#block-4').hide();

  if ($('#lAll').is(':selected')) {
    $('#block-1').fadeIn();
    $('#block-2').fadeIn();
    $('#block-3').fadeIn();
    $('#block-4').fadeIn();

  }
  if ($('#lOne').is(':selected')) {
    $('#block-1').fadeIn();

  }
  if ($('#lTwo').is(':selected')) {
    $('#block-2').fadeIn();

  }
  if ($('#lThree').is(':selected')) {
    $('#block-3').fadeIn();

  }
  if ($('#lFour').is(':selected')) {
    $('#block-4').fadeIn();

  }

});