H I O X INDIA
FREE Javascript
 HOME  ||  Scripts  ||  Purchase  ||  Tutorials  ||  Images  ||  Tools  ||  Templates 
  :-)  Send Page   :-)   Feedback   :-)   Register   :-)   Links   :-)   Support   :-)
Español Français 中文 Deutsch Portuguese Japanese தமிழ்
 Forums   Hosting   Internet Stats   Easy Calculation   FUN Games 

Java Script Source
List All
Date & Time
Calendar
Stop Watch script
Slide Show
Ad Display
Animated Image Effects
Image Effect
Mouse Effects
Color Picker Tool
Dynamic Color
Random Generator
Select All
Form Validation
Formatting Forms
Textbox Counter
Dynamic Form select
Bookmark
Window / User Info
Pagination
Security / Authenticate
Status Bar
Title Bar
Cursor Position
Country List
Calculators
Delete Repeated Values
Alphanumeric
Free Games





Toggle/Expander 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
- This javascript (misspelled as java script)/HTML code is given under GPL License
- i.e. Free use for those who use it as it is.
- Free, if your modification does not remove our copyright information and links.
- Detailed License information can be found here
- You can purchase the script if your requirements does not meet GPL License terms.


privacy policy     license     sitemap
© 2004-2010 HIOX INDIA

Others