A simple example for Expand and Collapse using jQuery events Show, Hide

Copy the below code and try your self…..

CSS

<style type=”text/css”>
        .controller {background:#0F0F1E; padding:10px 0; text-align:center}
        .controller a {color:#fff; font-weight:bold; display:block; cursor:pointer}
        .box {padding:10px; text-align:center; border:1px dashed #0F0F1E}
</style>

Java Script
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){
$(“.box”).hide();
$(“.down”).hide();
$(“.up”).click(function(){
        $(“.box”).show(300);
        $(“.up”).hide();
        $(“.down”).show();
});

$(“.down”).click(function(){
        $(“.box”).hide(300);
        $(“.up”).show();
        $(“.down”).hide();
});

});
</script>

HTML

<div class=”controller”>
<a class=”up”>CLICK TO EXPAND </a>
<a class=”down”>CLICK TO COLLAPSE</a>
</div>

DEMO

Web design company hyderabad