<style type="text/css">

#collapsible_div_outer {    
  display:none;
  background: FFCCCC;
  width: 300px;
  align:center;
  border: #BB1B2B 1px solid;
}

</style>
<script type="text/javascript" src="http://www.yoursite.com/jquery-latest.js">
</script>

<center>
<div id="collapsible_div_outer">
<table border="0" align="center" id="collapsible_table_inner">
  <tr>
    <td width="100%">
    <b>This is a Collapsible div:</b>
    <p align="center">Insert Text Here</p>
    <br><br>
    </td>
    <td width="1%" valign="top">
    <img src="div_close.gif" width="13" height="13" class="closeImg"></a></td>
  </tr>
</table>
</div>
</center>

<p align="center"><span id="collapsible_text">Open</span>
  Collapsible div <img src="div_open.gif" width="13" 
height="10" class="openImg" id="collapsible_indicator"></p>

<script type="text/javascript">

$(document).ready(function(){

  $("img.closeImg").click(
    function () {
      $("#collapsible_table_inner").slideUp("fast");
      $("#collapsible_div_outer").slideUp("medium");
      $("img#collapsible_indicator").attr("src", "div_open.gif");
      $("span#collapsible_text").html("Open");
    }
  );

  $("img.openImg").click(
    function () { 
      if(jQuery("img#collapsible_indicator").attr("src") == "div_open.gif")
      {
        $("#collapsible_table_inner").show();
        $("#collapsible_div_outer:hidden").slideDown("fast");
        $("img#collapsible_indicator").attr("src", "div_close2.gif");
        $("span#collapsible_text").html("Close");                    
      }
      else
      {
        $("#collapsible_table_inner").slideUp("fast");
        $("#collapsible_div_outer").slideUp("medium");
        $("img#collapsible_indicator").attr("src", "div_open.gif");
        $("span#collapsible_text").html("Open");
      }
    }
  );

});
</script>