Create expandable TOC (table of contents or sitemap) in HTML

Create expandable TOC (table of contents or sitemap) in HTML

12.23
How to create expandable table of contents for your blog or web? For table of contents some people use abbreviation TOC and others use term sitemap. In this article you will find HTML examples (with some javascript) and instructions how to implement TOC in HTML.

Let's start. First we will show example of creating TOC with one chapter which have one subtopic.

Simple example (one chapter with one subtopic):

+ HTML/Javascript tips


This example have chapter "HTML/Javascript". When you click on "+" you can see subtopic How to show and hide HTML elements using Javascript.

There is sample of HTML code needed to have this feature:

<a id="plusHTML-Javacript" onclick ="javascript:expandCollapse('HTML-JavacriptExpanded', 'plusHTML-Javacript')" href="javascript:;" >+ </a> HTML/Javascript tips  
<div class="mid" id="HTML-JavacriptExpanded" style="DISPLAY: none">&nbsp;<a href="http://interestingwebs.blogspot.com/2009/01/how-to-show-and-hide-html-elements.html" target="_blank"><font size="1">How to show and hide HTML elements using Javascript</a></div>


And javascript code:

<script language="JavaScript">
function expandCollapse(divId, anchorID)
{
   if(document.getElementById(divId).style.display    == 'none')
  {
    document.getElementById(divId).style.display='block';
    document.getElementById(anchorID).innerHTML='-';
   }
   else
  { 
    document.getElementById(divId).style.display ='none';
    document.getElementById(anchorID).innerHTML='+'; 
   }
   }
</script>


If you copy and paste HTML and jscript code above in your HTML editor you will get same result as on this page (expandable "HTML/Javascript" chapter with subtopic).

Warning for blogspot users. Javascript code work inside blospot posts only if it is written in one line. For more information see article Add javascript in blogspot (blogger) post.

If you want to implement your own TOC on your web you can copy and paste HTML code below and replace text in square bracket. Don't forget to add javascript portion of code (just copy and paste javascript code above).


<a id="[ANCHORID]" onclick ="javascript:expandCollapsePost('[DIVID]', '[ANCHORID]')" href="javascript:;" >+ 
</a> [CHPTEXT]
<div class="mid" id="[DIVID]" style="DISPLAY: none">&nbsp;<a href="[TOPICLINK]" target="_blank"><font size="1">[TOPICTEXT]</a></div>



  • [ANCHORID] - ID of <a> tag in which is a + sign. This is need to convert + sign in - sign or - sign to + (in function expandCollapse)


  • [DIVID] - ID of <div> tag. Inside div is anchor tag with hyperlink to subtopis, for more information about hide and show div tag see How to show and hide HTML elements using Javascript


  • [CHPTEXT] - text of chapter


  • [TOPICLINK] - url for subtopic


  • [TOPICTEXT] - text for subtopic




Two chapters side by side

Example:

+ HTML/Javascript tips

+ Useful webs


Two expandable chapters side by side you can implement with this code (plus javascript code):


<a id="[ANCHORID1]" onclick ="javascript:expandCollapsePost('[DIVID1]', '[ANCHORID1]')" href="javascript:;" >+
</a> [CHPTEXT1]
<div class="mid" id="[DIVID1]" style="DISPLAY: none">&nbsp;<a href="[TOPICLINK1]" target="_blank"><font size="1">[TOPICTEXT1]</a></div>

<a id="[ANCHORID2]" onclick ="javascript:expandCollapsePost('[DIVID2]', '[ANCHORID2]')" href="javascript:;" >+
</a> [CHPTEXT2]
<div class="mid" id="[DIVID2]" style="DISPLAY: none">&nbsp;<a href="[TOPICLINK2]" target="_blank"><font size="1">[TOPICTEXT2]</a>
<br>
<a href="[TOPICLINK3]" target="_blank"><font size="1">[TOPICTEXT3]</a>
<br>
<a href="[TOPICLINK4]" target="_blank"><font size="1">[TOPICTEXT4]</a>

</div>


With this system you can build as many chapters with as many subtopics you want.

Chapter with topic and subtopic

+ Blog tutorial

Code for chapter with subtopic (don't forget javascript code):


<a id="[ANCHORID1]" onclick="javascript:expandCollapsePost('[DIVID1]','[ANCHORID1]')" href="javascript:;" > + </a> [CHPTEXT1] 
<div class="mid" id="[DIVID1]" style="DISPLAY: none">
&nbsp;&nbsp;&nbsp;<a id="[ANCHORID2]" onclick="javascript:expandCollapsePost('[DIVID2]','[ANCHORID2]')" href="javascript:;" >+ </a> [SUBTOPICTEXT1] 
<div class="mid" id="[DIVID2]" style="DISPLAY: none">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="[TOPICLINK1]" target=_blank>[TOPICTEXT1]</a>
   </div>
</div>


Related articles:
Adding categories to blogspot (blogger)
How to create scrollable link list
How to create list of post links grouped by category using RSS (blogspot)

About

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Next
« Prev Post
Previous
Next Post »
Langganan: Posting Komentar (Atom)