[pmwiki-users] Including an Accordion widget

Hans design5 at softflow.co.uk
Mon Feb 14 16:37:23 CST 2011

Monday, February 14, 2011, 2:36:22 PM, Harald C. wrote:

> (1) to insert a call to one or two JavaScript files for that page only
> (2) include a css file in the head section for that page only
> (3) apply the prescribed HTML markup in that page where the accordion 
> should appear like:

> <div id="accordion">
>      <h3 class="accordion_header"><a href="#">First header</a></h3>
>      <div class="accordion_content">First content</div>
>      <h3 class="accordion_header"><a href="#">Second header</a></h3>
>      <div class="accordion_content">Second content</div>
>      ...
> </div>

create a php file in the local/ folder (where config.php resides).
Save it with the full page name (like for instance
Main.HomePage.php). This will act as an additional config script
for that page only. Likewise Main.php will serve as an additional
config script for all pages in the Main group.

Use $HTMLHeaderFmt[] to insert HTML code into the page head,
including lines to load jajascript files and css stylesheets.
For instance:
$HTMLHeaderFmt[] = "
  <link href='$PubDirUrl/css/somecustom.css' rel='stylesheet' />";

You can also create a page specific css file in the pub/css/ folder,
for instance pub/css/Main.HomePage.css
with css attributes only applied to that page.

Use $HTMLFooterFmt[] to insert HTML code into the body of a page,
just before the end. This can be useful for some javascript

For the prescribed HTML in point 3 you need some custom markup.

<div id="accordion"> is easy with
(:div0 id=accordeon:)

But PmWiki header markup does not allow for class attributes within the
<h..> tags.
Here is an additional header markup definition, for adding classes:

## !!!abcd!!! Header, with class=abcd
Markup('^!class!', '<^!',
  "'<:block,1><h'.strlen('$1').' class=\"'.PSS('$2').'\">'.PSS('$3</h').strlen('$1').'>'");

For <h3 class="accordion_header"> use this markup in the page:

That still leaves <a href="#">First header</a>, which also needs
custom markup because of the href="#".
You could try this: [[## First Header]]

## [[## link text]] markup
  '<a href="#" >$1</a>');

Alternatively here is an "Accordion" recipe which does not use jquery:
<?php if (!defined('PmWiki')) exit();

$HTMLHeaderFmt['accordion'] = "
                function Accordion(n) {
                        d = HideDivs(\"accordion\");
                        d[n].style.display = \"block\";

$HTMLFooterFmt['accordion'] = "
        function HideDivs(obj) {
                var el = document.getElementById(obj);
                if(el) { 
                                var d = el.getElementsByTagName(\"DIV\");
                                for(var i=0; i<d.length; i++) { 
                                                d[i].style.display =  \"none\"; 
                return d;
        window.onload = HideDivs(\"accordion\");

  '<a href="#" onclick="Accordion(\'$1\')">$2</a>');

In a page create an 'accordion' div like this

(:div0 id=accordion:)
!!![[##1 Section 1]]
Some text in the first section.
a bit more...
!!![[##2 Section 2]]
second section content
goes here....
!!![[##3 Section 3]]
third section content
goes here....

(:div0 id=accordion:) is essential, as the script looks for that

The numbering in the custom link markup is important, it refers to the
appropriate section.

 The 'acc' in >>acc<< adds just a class 'acc' as style hook, use
anything you like.

The script hides the sections on page load. If scripting is disabled
all sections are visible.


More information about the pmwiki-users mailing list