<html>
<script type="text/javascript" src="http://peakfitness.com.my/wp-content/themes/peak/assets/js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            if($(this).attr("value")=="content1"){
                $(".box").not(".content1").hide();
                $(".content1").show();
            }
            else if($(this).attr("value")=="content2"){
                $(".box").not(".content2").hide();
                $(".content2").show();
            }
			//start copy utk tambah content
            else if($(this).attr("value")=="content3"){
                $(".box").not(".content3").hide();
                $(".content3").show();
            }
			
			//end copy utk tambah content
            else{
                //$(".box").hide();
				$(".box").not(".default").hide();
                $(".default").show();
            }
        });
    }).change();
});
</script>
<body>
<div style="width: 100%;">
  <div style="float: left; width: 50%;">
   <p>Left Stuff</p>
 </div>
 <div style="float: left; width: 50%;">
         <select>
            <option>Choose Content</option>
            <option value="content1">content1</option>
            <option value="content2">content2</option>
        </select>
 </div>
</div>
<div class="default box" style="width: 100%;">
  <div style="float: left; width: 33%;">
   <p>Left Stuff Default</p>
  </div>
 <div style="float: left; width: 34%;">Middle Stuff Default</div>
 <div style="float: left; width: 33%;">Right Stuff Default</div>
</div>
<div class="content1 box" style="width: 100%;">
  <div style="float: left; width: 33%;">
   <p>Left Stuff Content 1</p>
  </div>
 <div style="float: left; width: 34%;">Middle Stuff Content 1</div>
 <div style="float: left; width: 33%;">Right Stuff Content 1</div>
</div>
<div class="content2 box" style="width: 100%;">
  <div style="float: left; width: 33%;">
   <p>Left Stuff Content 2</p>
  </div>
 <div style="float: left; width: 34%;">Middle Stuff Content 2</div>
 <div style="float: left; width: 33%;">Right Stuff Content 2</div>
</div>
</body>
</html> 