(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
<ul> 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:
<li> <a class="expander" href="#">Celia</a> <div class="content"> <p> 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. </p> </div> </li>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
<link rel=stylesheet href="expander.css" type="text/css">
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: