Expander Javascript - Toggle, List Expand, Text collapse, Show or Hide, Script

About

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

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

Preview

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

Hioxindia

Hscripts

Funmin

Downloads

Version 1.0 - expander.zip
Release Date - 17-12-2008
Get free version without ©copyright link for just 5

For customization of this script or any script development, contact us at support@hscripts.com

Usage

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

 <!-- Script by hscripts.com -->
 <!-- Copyright of HIOXINDIA -->
 <!-- More scripts @www.hscripts.com -->

//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><br>
  <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><br>
  <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><br>
  </td></tr></table>
  <div style="font-size: 10px; color: #dadada;" id="dumdiv">
  <a href="http://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>

  <!-- Script by hscripts.com -->

c) Set the ID for div and image tag inside toggleSlide() function.
For Example,
     <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;">
d) List any number of div elements to show and hide the text.

License

- The javascript (misspelled as java script) is given under GPL License
- i.e. Free use for those who use the codes as it is.
- Free, if your modification does not remove our copyright information and links.
- Click Here for detailed license information.
- You can purchase the script if your requirements does not meet our GPL License terms.

Toggle/Expander script