Expand and Collepse Div on Mouse Click

Expanding and Collapsing Div is a very cool effect in HTML using CSS and JavaScript. If we want to don't show any information on first look, but on click then we can use it, or you can use it on your relevancy and suitability. Let see, how it can be implemented.

CSS for design the div :-

<style>
.exp_div_wrapper    
{
        
}

#exp_div_wrap 
{
    margin-top: 0px;  
    margin-bottom: 30px; 
    background: green;
    width: 90%; height: 50px;
kit-border-bottom-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -moz-border-radius-bottomright: 15px;
    -moz-border-radius-bottomleft: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

#exp_div_wrap_toggle 
{
    display: block;
    width: 100%;
    height: 35px;
    line-height: 35px;
    background:#9999FF;
    text-align: center;
    color: white;
    font-weight: bold;
    font-variant: small-caps;
    box-shadow: 2px 2px 3px #888888;
    text-decoration:none;
}

#exp_div_wrap_toggle:hover 
{
    text-decoration:none;
    border-top: 1px groove white;
    border-left: 1px groove white;
    border-bottom: 1px solid #7B7B78;
    border-right: 1px solid #7B7B78;
    color: #663200;
    background:#FF66FF;
    box-shadow: 1px 1px 2px #888888;
}
</style>

You can change the div design by making change in above CSS.

Now the HTML used for creating div is :-

<div class="exp_div_toggle_wrapper">
  <a href="#0" id="exp_div_wrap_toggle">Expand Div</a>
</div> 
<center><div  id="exp_div_wrap" style="display: none;">
</div></center>

and below this HTML, use JQuery/JavaScript

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($)
{
  
  $("#exp_div_wrap_toggle").click(function()
  {
    
    $("#exp_div_wrap").slideToggle( "slow");
    
  if ($("#exp_div_wrap_toggle").text() == "Expand Div")
      {
        $("#exp_div_wrap_toggle").html("Hide Div")
      }
  else 
      {
        $("#exp_div_wrap_toggle").text("Expand Div")
      }
    
  });  
  
});
</script>

Screenshot is given below:-