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

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.


This is a Collapsible div:

Insert Text Here

Open Collapsible div

JQuery Source Code:

 Code Snippet 1

<style type="text/css">

#collapsible_div_outer {    
  background: FFCCCC;
  width: 300px;
  border: #BB1B2B 1px solid;

<script type="text/javascript" src="">

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

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


    function () {
      $("img#collapsible_indicator").attr("src", "div_open.gif");

    function () { 
      if(jQuery("img#collapsible_indicator").attr("src") == "div_open.gif")
        $("img#collapsible_indicator").attr("src", "div_close2.gif");
        $("img#collapsible_indicator").attr("src", "div_open.gif");


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:
*Description and Code:
*Enter Code shown
to the right:

[ Refresh Image ]