Simple Table Of Contents in JQuery

A Tech article with View Comments posted 29 December 2009.
Tags:

I developed a handy Table of Contents script using JQuery for another project, now abandoned, and I decided to implement it on this website (which uses WordPress). This assumes that you have JQuery already loaded and are using WordPress 2.9 or newer.

How To Do It

  1. Make sure that your theme uses the new body_class() template tag. If it is, the HTML should read something like this:
    1. <body class="single postid-842 logged-in">

    If it doesn’t, edit header.php to make the tag look something like this:

    1. <body <?php body_class(); ?>>

    Note: This could very well muck up your theme if it uses CSS classes (e.g. date) for other purposes. Be sure to test everything carefully after this step.

  2. Copy the following JQuery script into a file in your template directory called js/toc.js:
    1. jQuery(function () {
    2.       var started = false;
    3.       jQuery("body.single .entry h2").each(function (index) {
    4.         // Create div if needed
    5.         if(!started) {
    6.           jQuery('body.single .entry').prepend('<div id="intlinks"><a name="top"></a><p><strong>On this page:</strong></p><ul></ul></div>');
    7.           started = true;
    8.         }
    9.  
    10.         // Manipulate h* tag
    11.         var header = jQuery(this);
    12.         var headerId = 'header-'+index;
    13.         header.attr('id', headerId);
    14.  
    15.         // Manipulate list
    16.         var li = jQuery('<li></li>').appendTo('#intlinks ul');
    17.         jQuery('<a></a>').text(header.text()).attr({ 'title': 'Jump to '+header.text(), 'href': '#'+headerId }).appendTo(li);
    18.       });
    19.       jQuery('body.single .entry h2').wrapInner('<a title="Back to top" href="#top"></a>');
    20.     });

    If this doesn’t work for you for some reason, you might need to change body.single .entry in the script above to be the correct CSS selector for the content div of your theme.

  3. Next, edit header.php and include this line near the end (after the call to wp_head()):
    1. <?php if(is_single()) : ?><script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/toc.js"></script><?php endif; ?>

Add Some Style

Now that you’ve got the Table of Contents working, it’s time to style it. Here’s a very simple example from this site:

  1. #intlinks {
  2.   width: 150px;
  3.   float: right;
  4.   margin: 10px;
  5.   padding: 10px;
  6.   background-color: #FFEEEE;
  7.   -moz-border-radius: 5px;
  8.   -webkit-border-radius: 5px;
  9.   border-radius: 5px;
  10. }

Future Plans

If enough interest is shown in this, I’ll turn this into a WordPress plugin so that it is even easier to install. Be sure to let me know in the comments.

You might also enjoy:
  1. WordPress jQuery Table of Contents plugin
  2. Simple flashcards using JQuery
  3. Extracting the next 7 days from phpiCalendar to simple HTML
  4. Freedom Software, Competition, and WordPress Plugins
  5. Viola! New Theme!

Leave a Reply

blog comments powered by Disqus