Products
Services
Contact Us

Scripts: DHTML :: Collapsible Divs :: Library Article #3

Developer's Section

JQuery Collapsible Div Effect
By: Erobo Team Member

Hire a Developer for Related Work / Installation | $55 hr
Rating:  | Rate It:   
Average Votes: (3205)
Favorites:

Learn to create a collapsible effect using JQuery and an html div.

In this tutorial we will be looking at a JQuery script that collapses an html div block every time the user clicks open or close.

Example:

This is a Collapsible div:

Insert Text Here



Open Collapsible div

JQuery Source Code:

 Code Snippet 1

<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>


Downloads
jquery-latest.js95.3 KB
div_close.gif0.3 KB
div_close2.gif0.2 KB
div_open.gif0.2 KB
 

See other Scripts in Collapsible Divs

Submit Your Scripts:

If you would like to have your DHTML scripts published in this section please fill out
the form below:
*Your Name or Username:
Home Town:
*Email:
*Description and Code:
*Enter Code shown
to the right:

[ Refresh Image ]