Toggle/Expander Script

A simple javascript code that expands a block of text. For example, when you click the title or image, the text under it will expand. when you press the title or image again, it will collapse the text. A function that basically toggles the visibility of an element e.g. click, show, click, hide.

Features

List don't have a depth limit and you can use more than one list on the same page.
Dynamically adds buttons and expand and collapse all child lists.
Set depth level up to which you want to have lists initially expanded.
Cross browser support.
Accessible to browsers with Javascript or CSS support.

Preview

Click on the image , to show or hide the text.

Hioxindia

Hscripts

Funmin

Downloads

Release Date - 17-12-2008
Downloads : Version 1.0 - expander.zip
Get free version without ©copyright link for just $10/-
For customization of this script or any script development, mail to support@hscripts.com

Usage

Download and unzip expander.zip file.
Now copy the following entry in to the file, where you want the toggle/collapse script.

//Insert the below code into your head part.
<script type="text/javascript" src="hexpander/movingjs.js"></script>
//Insert the below code into your body part.
<table align=center height="100px" border=0 width="500px" cellspacing=0 cellpadding=0>
<tr><td>
<a style="font-family:verdana;font-size:12px;">
<img src="hexpander/insert.jpg" id="insert1" align="absmiddle" onClick="toggleSlide('div1',this.id);">Hioxindia</a> <div id="div1" style="display:none; overflow: hidden; height: 75px;margin:10px;"> <div style="font-family:verdana;font-size:12px;">HIOX INDIA is currently involved in web services, software/application development, web content development, web hosting, domain registration, internet solutions and web design.</div> </div>
<a style="font-family:verdana;font-size:12px;"><img src="hexpander/insert.jpg" id="insert2" align="absmiddle" onClick="toggleSlide('div2',this.id);">Hscripts</a> <div id="div2" style="display:none; overflow: hidden; height: 75px;margin:10px;"> <div style="font-family:verdana;font-size:12px;">Free php, javascript and jsp scripts, free tutorials, free online web site tools, free gif myspace icons, free clipart images and other webmaster resources. </div> </div>
<a style="font-family:verdana;font-size:12px;"><img src="hexpander/insert.jpg" id="insert3" align="absmiddle" onClick="toggleSlide('div3',this.id);">Funmin</a> <div id="div3" style="display:none; overflow: hidden; height: 75px;margin:10px;"> <div style="font-family:verdana;font-size:12px;">Free online games , offline games and flash games are available. All the games are very interesting and challenging. </div> </div>
</td></tr></table></font> <div style="font-size: 10px; color: #dadada;" id="dumdiv"> <a href="//www.hscripts.com" id="dum" style="text-decoration:none; color: #dadada;">© hscripts.com</a> </div>
<script language="javascript">
document.onload = ctck();
function ctck()
{
var sds = document.getElementById("dum");
if(sds == null)
{
alert("You are using a free package.\n You are not allowed to remove the tag.\n");
}
var sdss = document.getElementById("dumdiv");
if(sdss == null)
{
alert("You are using a free package.\n You are not allowed to remove the tag.\n");
}
}
</script>

Set the ID for div and image tag inside toggleSlide() function.

  <a style="font-family:verdana;font-size:12px;">
     <img src="hexpander/insert.jpg"id="insert3" align="absmiddle"
      onClick="toggleSlide('div3',this.id);">Funmin</a>
     <div id="div3" style="display:none;overflow:hidden;height:75px;margin:10px;">