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: (1835)
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:


System Message:
  • Your DHTML script has been sent. Please allow 48 hours for processing.


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 ]