(Continued from How to Use Web Pages as Outlining Tools IV.)

To do this, I coded an outline as a list of lists, using HTML

elements. This gave me a bulleted list of bulleted lists, where each list item was a topic such as “A bit of our history” or “New Vehicle Appeal”.

I then followed each topic by the HTML needed to implement Simple-expand’s expand/collapse control. Like this:

  

   Celia
    

      

        Celia (72) retired as a post lady a couple 
        of years ago and leads a very active life 
        even despite now being retired. Celia 
        drives for us one day a week which she really 
        enjoys as it gets her meeting different people 
        and of course being a post lady she knows 
        where places are.
      
    
  

As the Simple-expand website explains, you need an element to use as the control, and an element that contains the content. The latter must have class content.

I also had to include a stylesheet and some JavaScript in the page. This follows the same kind of pattern as in “How to Generate Random Quotes in JavaScript”. The stylesheet was loaded by a reference in the head of the page,

The JavaScript includes a reference to the jQuery library, downloaded from Google Hosted Libraries. There’s a reference to the code file itself, simple-expand.js. And there’s an initialisation call. As with the random-quote generator, this calls the expand/collapse setup code, but in a way that ensures all the HTML it operates on has been loaded first. The setup call also links the code to elements with class expander, meaning that it will treat these as the controls.

The result was
“What Other Community-Transport Sites are Doing, Especially about Volunteers and Funding”. This is it with all topics collapsed:

And here it is with a few topics expanded: