drop down change content

by James Hooper

HTML

<div class="christmas-del">
  <div class="main-box">
    <h1>Select Your Country</h1>
    <select class="div-toggle" data-target=".my-info-1">
       <option value="orange" data-show=".a">Test A</option>
       <option value="lemon" data-show=".b">Test B</option>
       <option value="apple" data-show=".c">Test C</option>
       <option value="pear" data-show=".d">Test D</option>
    </select>
  </div>


  <div class="my-info-1">
    <div class="a hide">
      <div class="ord-on-tab">Order On</div>
      <div class="ord-by-tab">Order By</div>
      <div class="del-on-tab">Delivery On</div>
    </div>
    <div class="b hide">Test B</div>
    <div class="c hide">Test C</div>
    <div class="d hide">Test D</div>
  </div>
</div>

CSS

.hide {
  display: none;
}

.christmas-del {
  width:80%;
  margin:auto;
}
.main-box, .my-info-1 {
  width:100%;
  margin:0 auto 15px;
  background-color:#fff;
  box-shadow:0 4px 6px -2px rgba(0,0,0,.2);
  padding:10px;
  display:block;
  float:left;
}

.main-box h1 {
  margin-bottom:10px;
}

.main-box select {
  width:100%;
  max-width:75%;
  padding:10px;
  font-size:1em;
  
}

.ord-on-tab, .ord-by-tab, .del-on-tab {
  width:33%;
  display:block;
  float:left;
}

JavaScript

$(document).on('change', '.div-toggle', function() {

  var target = $(this).data('target');
  var show = $("option:selected", this).data('show');
  
  $(target).children().addClass('hide');
  $(show).removeClass('hide');
});

$(document).ready(function(){
	$('.div-toggle').trigger('change');
});