Monday, January 19, 2009

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

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)



4 comments:

illith said...

i gonna go nuts x__X

this is exactly, what i want to have (the secon version), but i just CAN'T get it to work - i tried for hours.
i just don't get, what is this DIVID and ANCHORID about and with what to replace it.

i tried it on my blogger blog as well as local with a simple HTML file.

please help!

illith said...

*groan* dunno exactly how but i made it work! yeehaw!

but i still would like to know more about HOW this works...

btw: you wrote, JS needs to be written in an single line in/for blogspot - i can't confirm that?!

Mark said...

I am glad you manage to do what you want.
To learn more about how HTML works I suggest you to go to:
http://www.w3schools.com/
It is excellent site with lots of HTML and javascript tutorials.
Use their search to learn things.
For example of you don't know what is div, type div in their search box and you will find information like this: The div tag is often used to group block-elements to format them with styles...

Unknown said...

Could you please make a tutorial on how to use it on blogspot ? Please send me a message here: manuelgarciaph@yahoo.com hope you will reply.