Demo of Show Hide Effects using JQuery

CSS

<style>
.msg{ 
position: relative;
FONT-SIZE: 12px;
font-family: Verdana;
padding:10px;
width:350px;
background-color: #f1f1f1;
}
</style>

HTML

<div class="row">
  <div class="col-md-4"><input type=button id=b1 value='Toggle (Fast)'></div>
  <div class="col-md-4"><div id=d1 class='msg'>Hide this layer by using buttons</div>
</div>

<br><br><br><br>

<div class="row">
  <div class="col-md-4"><input type=button id=b2 value='Toggle (Slow)'></div>
  <div class="col-md-4"><div id=d2 class='msg'>Hide this layer by using buttons</div>
</div>

<br><br><br><br>
<div class="row">
  <div class="col-md-4"><input type=button id=b3 value='Toggle ( 5000 Milli Seconds)'></div>
  <div class="col-md-4"><div id=d3 class='msg'>Hide this layer by using buttons</div>
</div>

jquery

<script>
$(document).ready(function() {
$('#b1').click(function(){
$('#d1').toggle('fast');
})
/////Slow ////
$('#b2').click(function(){
$('#d2').toggle('slow');
})
////// milli seconds //
$('#b3').click(function(){
$('#d3').toggle(5000);
})
//////
})
</script>