Jquery Show/Hide Div

Jquery Show/Hide a div onclick.









<style>

body{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;}

.slidingDiv {
height:100px;
width:150px;
background-color: #99CCFF;
padding:20px;
margin-top:10px;
    border-bottom:5px solid #3399FF;
}

.show_hide {
display:none;
}


</style>




<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){


    $(".slidingDiv").hide();
$(".show_hide").show();

$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});

});

</script>

 <a href="#" class="show_hide">Show/hide</a><br />
    <div class="slidingDiv">

       <a href="profile.htm" style="text-decoration:none;">Profile</a></br> 
  
       <a href="changepassword.htm" style="text-decoration:none;">Change Password</a></br> 
       <a href="logout.htm" style="text-decoration:none;">Profile</a> 
</br>
<a href="#" class="show_hide">hide</a>
    </div>

Categories: JQuery