« »

This script is used to display content in a familiar 'Explorer' type fashion. Simply click the little icon (or the header text itself) and the content in the folder will collapse/expand.

Label: FolderTree

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
Files
CSS
JavaScript
HTML
Print

Copy All x2

<style type="text/css">

a, a:visited, a:active {
font-size:10pt;
font-weight:normal;
font-family:sans-serif;
color:black;
text-decoration:underline;
}

a:hover {
font-size:10pt;
font-weight:normal;
font-family:sans-serif;
color:#00436e;
text-decoration:none;
}

body{
font-size:10pt;
font-weight:normal;
font-family:sans-serif;
color:black;
background-color:rgb(255,255,255);
}

.code{
font-size:10pt;
font-weight:normal;
font-family:serif;
color:maroon;
}

.code1{
font-size:10pt;
font-weight:normal;
font-family:serif;
color:blue;
}

.code2{
font-size:10pt;
font-weight:normal;
font-family:serif;
color:green;
}

.desc {
cursor:default;
font-size:10pt;
font-weight:normal;
font-family:sans-serif;
color:maroon;
}

.folder {
cursor:default;
display:block;
font-size:12pt;
font-family:serif;
font-weight:bold;
color:black;
padding:6 0 0 0;
}

.content {
display:none;
color:#00436e;
padding: 0 0 0 25;
font-size:10pt;
font-family:sans-serif;
}

.container{
width:98%;
display:block;
}

</style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<script language="javascript" type="text/javascript" src="foldertree.js"></script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<a href="javascript:expandall()">Expand all</a> | <a href="javascript:collapseall()">

Collapse all</a>

<br><br>


<div class="container"><span class="folder" id="mainID">
  <img src="plus.gif" width="16" height="13"> Main Menu</span>
<div class="content">


  <div class="container"><span class="folder">
    <img src="plus.gif" width="16" height="13"> Description</span>

  <div class="content">
  This script is used to display content in a familiar &quot;Explorer&quot; type fashion.<br><br>
  Simply click the little icon (or the header text itself) and the content in 
	the folder will collapse/expand.<br><br>
  The icon will switch state when the folders are opened and closed. These icons 
	are:<br>
  <ul>
  <li><i>minus.gif</i>: This image is shown when the folders are opened.
  <li><i>plus.gif</i>: This image is shown when the fodlers are closed.
  </ul>

  The default images are those of actual little folders, but I have also 
	included (in the downloadable zip file) optional plus sign and minus sign 
	images.  
  </div></div>

  <div class="container"><span class="folder">
    <img src="plus.gif" width="16" height="13"> Installation</span>
  <div class="content">
  <ol>
  <li>You&#39;ll need to paste a few lines of stylesheet code in the HEAD section of 
	your page to give the elements the properties they need to allow the script 
	to work.:<br><br>

  <div class="code">
  &lt;style type=&quot;text/css&quot;&gt;<br>
  .folder { cursor:default; display:block; padding:6 0 0 0; }<br>
  .content { display:none; padding: 0 0 0 40; }<br>
  .container{ display:block; }<br>
  &lt;/style&gt;

  </div>
  <br>
  You can adjust the values in these, but the preset ones give the best effect. 
	You can also add in font style declarations.<br><br>
  <li>Then, you&#39;ll need to paste one line of javascript in your page.<pre class="code">  &lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot; src=&quot;foldertree.js&quot;&gt;&lt;/script&gt;</pre>

  <li>This next step is probably the most difficult one, especially if you plan 
	on having multiple nesting branches. There is a specific format that needs 
	to be followed. First, let me explain the basic parts of the elements:<br><br>
  <ul>
  <li><i>The Folder SPAN element</i>. This is the header with the plus/minus 
	sign next to it and is the one you click to expand the content.
  <li><i>The Content DIV element</i>. This is the section that is not visible 
	until you click the header text. This is also where you put other sets of 
	elements if you are going to have other branches.
  <li><i>The Container DIV element</i>. This is the container that holds both of 
	the elements above.
  </ul>
  <br>The following example shows the basic structure:<br><br>
  <div class="code">

  &lt;div class=&quot;container&quot;&gt;<br>
  &lt;span class=&quot;folder&quot;&gt;&lt;img src=&quot;plus.gif&quot;&gt; The Header Text &lt;/span&gt;<br>
  &lt;div class=&quot;content&quot;&gt; Your Content Here...&lt;/div&gt;<br>

  &lt;/div&gt;<br>
  </div>
  <br>
  This script supports multi-level nesting. The following example shows a single 
	entry with two branches to show the format of a nested branch:<br><br>
  <div class="code">
  &lt;div class=&quot;container&quot;&gt;<br>
  &lt;span class=&quot;folder&quot;&gt;&lt;img src=&quot;plus.gif&quot;&gt; The Header Text &lt;/span&gt;<br>

  &lt;div class=&quot;content&quot;&gt;<br>
  <div class="code1">
  &nbsp;&nbsp;&nbsp; &nbsp;&lt;div class=&quot;container&quot;&gt;<br>
  &nbsp;&nbsp;&nbsp; &nbsp;&lt;span class=&quot;folder&quot;&gt;&lt;img src=&quot;plus.gif&quot;&gt; The First Branch 
	&lt;/span&gt;<br>

  &nbsp;&nbsp;&nbsp; &nbsp;&lt;div class=&quot;content&quot;&gt;
  <div class="code2">
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&lt;div 
	class=&quot;container&quot;&gt;<br>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&lt;span 
	class=&quot;folder&quot;&gt;&lt;img src=&quot;plus.gif&quot;&gt; The Second Branch &lt;/span&gt;<br>

  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&lt;div class=&quot;content&quot;&gt; 
	Content for the innermost branch... <br>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;<br>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;<br>
  </div>

  &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;<br>
  &nbsp;&nbsp;&nbsp; &nbsp;&lt;/div&gt;<br>
  </div>
  &lt;/div&gt;<br>
  &lt;/div&gt;<br>
  </div>

  <br>
  You&#39;ll notice in both of the examples above, there is no javascript that 
	causes the folders to open or close; that&#39;s because the script searches for 
	elements of a certain classname and automatically assigns mouse events. You 
	do not even have to assign an ID to any folder ( unless you want a specific 
	folder opened initially; more on this in the <b>Notes</b> section ). This is 
	why it is important to follow the format given above; if not, the script 
	will generate errors.<br><br>
  </div></div>

  <div class="container">
  <ol>

  <ol>
  <ol>
  <span class="folder"><img src="plus.gif"> Notes</span>
  <div class="content">
  <ul>
  <li>This script only works in standards compliant browsers (IE5+, Netscape6+). 
	Other browsers should simply show the menu with none of the content, but 
	shouldn&#39;t generate any errors.<br><br>
  <li>This script does it&#39;s &quot;magic&quot; once the page loads by using the <span class="code">

	window.onload</span> event handler. This isn&#39;t a problem unless you use 
	another script that also uses this event; only one will work. The good news 
	is that you can get them all to work. Go <a href="http://scriptasylum.com/faqpage.html" target="_blank">
	here</a> for the explanation on how this is done.<br><br>
  <li>Depending on your application, you may want the tree to appear initially 
	open or closed, just one change to the script will do the trick. Edit the <span class="code">
	foldertree.js</span> file and find the lines that read:
  <br><br>

  <pre class="code">  function FTinit(){
  var tids=document.getElementsByTagName(&#39;span&#39;);
  for(i=0;i&lt;tids.length;i++)if(tids[i].className==&quot;folder&quot;)ids[ids.length]=tids[i];
  for(i=0;i&lt;ids.length;i++)ids[i].onmouseup=setstate;
  //expandall(); // REMOVE THE // FROM THE BIGINNING OF THIS LINE TO HAVE THE TREE EXPANDED INITIALLY.
  }</pre>
  Just remove the two <span class="code">//</span> from the beginning of the 
	line that has the <span class="code">expandall()</span> function and now 
	your foldertree will be opened on pageload.<br><br>

  <li>You&#39;ll notice at the top of this page that there are two links; one to 
	expand all the folders and one to collapse all the folders. These links just 
	call 2 included javascript functions to expand or collapse all the folders 
	at once. You use them as you would a normal hyperlink, see the examples 
	below:<br><br>
  <div class="code">
  &lt;a href=&quot;javascript:expandall()&quot;&gt;Expand all&lt;/a&gt;<br>
  &lt;a href=&quot;javascript:collapseall()&quot;&gt;Collapse all&lt;/a&gt;

  </div>
  <br>
  <li>There are two other functions included in the script called <span class="code">
	openById()</span> and <span class="code">closeById()</span>. So far, the 
	script lets you have all the folders open or all closed initally. These 
	functions allow you have one or more folders opened or closed initially; 
	useful if you want to have all the folders closed except for one or two 
	individual ones. Here&#39;s a quick rundown how to use these commands:<br><br>
      <ol>

      <li>Assign a unique ID to all folders you want to have open or closed ( 
		ONLY the <i>folder</i> elements ).<br><br>
      <li>Then add either of the following commands at the end of the <span class="code">
		window.onload</span> event handler. When you do this, you must also pass 
		the folder&#39;s element reference:<br><br>
      <div class="code">

      openById( &#39;your_id_here&#39; );<br>
      closeById( &#39;your_id_here&#39; );
      </div><br>
      Substitute the ID you&#39;ve assigned instead of <span class="code">
		your_id_here</span>.<br><br>

      <li>You&#39;ll need to add one of these for every individual folder element 
		you want to have opened/closed on pageload.
  </ol><br>
  Note that if you have a specific folder expanded on pageload, but it is part 
	of a closed branch, that folder will only be seen if the parent branch is 
	expanded.<br><br>
  <li>Do not use the class names explained earlier anywhere else in your page or 
	you&#39;ll get some weird effects or errors. This is because the script hunts 
	down all DIV elements with a classname of &quot;folder&quot;, it then sets mouse 
	events to expand/collapse its sister DIV (class name &quot;content&quot;). So, if the 
	format explained earlier isn&#39;t followed, the script will generate errors.
  </ul>
  </div></div>

  <div class="container">
  <ol>
  <ol>
  <ol>
  <span class="folder"><img src="plus.gif">
  <ol>
  <ol>
  Nesting Example</span>

  <div class="content">
  <ol>
  The other entries in this folder simply demonstrate support for virtually 
	unlimited nesting.

        <div class="container"><span class="folder">
          <img src="plus.gif" width="16" height="13"> One level.</span>
        <div class="content">
          <div class="container"><span class="folder">
            <img src="plus.gif" width="16" height="13"> ...Another level</span>

          <div class="content">
            <div class="container"><span class="folder">
              <img src="plus.gif" width="16" height="13"> ...And another</span>
            <div class="content">
              <div class="container"><span class="folder">
                <img src="plus.gif" width="16" height="13"> ...Yet another</span>
              <div class="content">

              Nothing of interest in here... 
              </div></div>
            </div></div>
          </div></div>
        </div></div>

  </div></div>

</div></div>


</ol>

</ol>


</ol>
</ol>
</ol>
</ol>
</div>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->