Tuesday, May 27, 2014

Jquery Show Hide Event

First of all you need to  add the jquery library  and include that in you file
After that  you need to write the script

<script>
$(document).ready(function(){

   $(".link").click(function(){     //  onclick event on the  div class
       var id = $(this).attr('id');   //  get the  id attribute
       id = id.substring(5);    
       $('.map').hide();
       $('#firstbox'+id).show();
   });

});
</script>

<div id="first1" class="link" >First1</div>
<div id="first2" class="link" >First2</div>


<div id="firstbox1" class="map" style="display:none">  first box here  </div>
<br/>
<div id="firstbox2" class="map" style="display:none">  Second  box here  </div>