jQuery events Show, Hide

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

        <img src="http://piclibrary.com/lib/football.jpg" width="700" />
    </div>

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

DEMO