TUTORIAL: Expand/collapse blocks and navigation trees

  • casablanca
  • Proficient
  • Proficient
  • User avatar
  • Posts: 481

Post 3+ Months Ago

Introduction


You've seen expand/collapse blocks just about everywhere on the Internet! Ever wanted to know how to make your own? You'll be surprised at how simple it is - just a few lines of JavaScript will let you toggle any block of content on your webpage.

The rest of this tutorial assumes a basic knowledge of HTML and JavaScript.

A simple toggle block


Attachments:
toggle.png

Simple expand/collapse block


Let us start with a simple block of text (it could as well contain images and any other content) that we wish to make toggle-able:
Code: [ Select ]
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc fermentum.
</div>
  1. <div id="content">
  2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc fermentum.
  3. </div>

Next, we add a link that toggles the block when clicked:
Code: [ Select ]
<a href="#" onclick="toggle('content')">Toggle</a>

All that is left is the actual toggle function. The toggle function itself is quite simple: it takes the ID of the element to toggle and uses the CSS display property to show/hide it. By default, the display property is blank. (unless specified otherwise in the CSS) To hide an element, you just set display to 'none'. The code goes like this:
Code: [ Select ]
<script type="text/javascript">
 
function toggle(id) {
  var e = document.getElementById(id);
 
  if (e.style.display == '')
    e.style.display = 'none';
  else
    e.style.display = '';
}
 
</script>
  1. <script type="text/javascript">
  2.  
  3. function toggle(id) {
  4.   var e = document.getElementById(id);
  5.  
  6.   if (e.style.display == '')
  7.     e.style.display = 'none';
  8.   else
  9.     e.style.display = '';
  10. }
  11.  
  12. </script>

Put the above 3 code fragments together and you've got a working expand/collapse block.

In the above example, the block is initially visible. To have the block hidden by default, simply modify the first line as follows:
Code: [ Select ]
<div id="content" style="display:none">


A small addition


With the addition of a couple more lines, you can also toggle the link text between 'Expand' and 'Collapse' when the user clicks on it. To do this, we pass in another parameter to toggle: a reference to the link that activates the toggle effect.
Code: [ Select ]
<a href="#" onclick="toggle2('content', this)">Collapse</a>

Code: [ Select ]
<script type="text/javascript">
 
function toggle2(id, link) {
  var e = document.getElementById(id);
 
  if (e.style.display == '') {
    e.style.display = 'none';
    link.innerHTML = 'Expand';
  } else {
    e.style.display = '';
    link.innerHTML = 'Collapse';
  }
}
 
</script>
  1. <script type="text/javascript">
  2.  
  3. function toggle2(id, link) {
  4.   var e = document.getElementById(id);
  5.  
  6.   if (e.style.display == '') {
  7.     e.style.display = 'none';
  8.     link.innerHTML = 'Expand';
  9.   } else {
  10.     e.style.display = '';
  11.     link.innerHTML = 'Collapse';
  12.   }
  13. }
  14.  
  15. </script>


Building tree structures


Attachments:
toggle-tree.png

Nested expand/collapse blocks in tree format


By nesting one block within another, you can create tree-like structures where each individual node can be expanded and collapsed. The code for this uses the same toggle function defined above, except that multiple blocks are nested within each other:
Code: [ Select ]
<ul>
  <li>
    <a href="#" onclick="toggle('node1')">Item 1</a>
    <ul id="node1" style="display:none">
      <li>Sub-item 1</li>
      <li>
        <a href="#" onclick="toggle('node2')">Sub-item 2</a>
        <ul id="node2" style="display:none">
          <li>Sub-sub-item 1</li>
          <li>Sub-sub-item 2</li>
        </ul>
      </li>
      <li>Sub-item 3</li>
    </ul>
  </li>
  <li>
    <a href="#" onclick="toggle('node3')">Item 2</a>
    <ul id="node3" style="display:none">
      <li>Sub-item 1</li>
      <li>Sub-item 2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>
  1. <ul>
  2.   <li>
  3.     <a href="#" onclick="toggle('node1')">Item 1</a>
  4.     <ul id="node1" style="display:none">
  5.       <li>Sub-item 1</li>
  6.       <li>
  7.         <a href="#" onclick="toggle('node2')">Sub-item 2</a>
  8.         <ul id="node2" style="display:none">
  9.           <li>Sub-sub-item 1</li>
  10.           <li>Sub-sub-item 2</li>
  11.         </ul>
  12.       </li>
  13.       <li>Sub-item 3</li>
  14.     </ul>
  15.   </li>
  16.   <li>
  17.     <a href="#" onclick="toggle('node3')">Item 2</a>
  18.     <ul id="node3" style="display:none">
  19.       <li>Sub-item 1</li>
  20.       <li>Sub-item 2</li>
  21.     </ul>
  22.   </li>
  23.   <li>Item 3</li>
  24. </ul>


Conclusion


Well, that's about it! It's that simple to create an expand/collapse block. And you can use as many of these blocks as you want on a single page.

You can download the sample code for this tutorial below. The attachment contains a single HTML file that shows the expand/collapse block and navigation tree in action.
Attachments:
toggle.zip

(723 Bytes) Downloaded 7634 times

Tutorial sample code

  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Awesome tutorial :D I think I will use it :D
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

very cool, was hoping to find a tutorial on expanding/collapsing divs through javascript. Who knew all I had to do was look at my local ozzu forum.
  • Nina07
  • Born
  • Born
  • Nina07
  • Posts: 2

Post 3+ Months Ago

Hi,

Thanks for the great tutorial.
But I still have one question. I use this code in a larger html-page. When I click on expand or collapse the page jumps automatically to the top of the page. Is there a way to change this?

Thanks.
  • sammiej
  • Born
  • Born
  • sammiej
  • Posts: 2
  • Loc: Caribbean

Post 3+ Months Ago

PERFECT! Just what I needed, you are wonderful, thanks!
Sam
  • missd
  • Born
  • Born
  • missd
  • Posts: 1

Post 3+ Months Ago

This was fantastic and simple to follow. Thanks!
  • foseco
  • Born
  • Born
  • foseco
  • Posts: 1

Post 3+ Months Ago

Hi I realise this is an old thread but I am just starting a wiki for my IT dept. and have just found this. I really like this code and it was just what I was looking for but like Nina07, I too need to use it on a large page and it jumps back up to the top when a text block is expanded. Anyone know how to stop this?

Thanks

Post Information

  • Total Posts in this topic: 7 posts
  • Moderator: Tutorial Writers
  • Users browsing this forum: No registered users and 4 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.