[pmwiki-users] Including an Accordion widget
Harald C.
haraldc at gmx.net
Tue Feb 15 05:20:14 CST 2011
Hello Hans,
Thank you for your quick answer.
I tried your alternative recipe, and it does work, but:
With the script as is one has to start the numbering in the custom link
markup at '0' instead of '1' like this:
(:div0 id=accordion:)
!!![[##0 Section 1]] <-
>>acc<<
Some text in the first section.
a bit more...
>><<
!!![[##1 Section 2]] <-
>>acc<<
second section content
goes here....
>><<
...
otherwise a click on the 'Section 1' header shows the content of section
2 etc.
Where to amend your script?
One important note:
No empty line is permitted between sections:
wrong:
!!![[##0 Section 1]]
>>acc<<
Some text in the first section.
a bit more...
>><<
!!![[##1 Section 2]]
>>acc<<
second section content
goes here....
>><<
correct:
!!![[##0 Section 1]]
>>acc<<
Some text in the first section.
a bit more...
>><<
!!![[##1 Section 2]]
>>acc<<
second section content
goes here....
>><<
However, within a section content empty lines (to create paragraphs) are
allowed.
Harald
Hans schrieb am / wrote on 14.02.2011 23:37:
> Alternatively here is an "Accordion" recipe which does not use jquery:
> =====================================================================
> <?php if (!defined('PmWiki')) exit();
>
> $HTMLHeaderFmt['accordion'] = "
> <script>
> function Accordion(n) {
> d = HideDivs(\"accordion\");
> d[n].style.display = \"block\";
> };
> </script>
> ";
>
> $HTMLFooterFmt['accordion'] = "
> <script>
> 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;
> }
> //init
> window.onload = HideDivs(\"accordion\");
> </script>
> ";
>
> Markup('[[##','<[[','/(?>\\[\\[##([0-9]*))\\s+(.*?)\\]\\]/',
> '<a href="#" onclick="Accordion(\'$1\')">$2</a>');
> =======================================================================
>
> In a page create an 'accordion' div like this
>
> (:div0 id=accordion:)
> !!![[##1 Section 1]]
>>> acc<<
> Some text in the first section.
> a bit more...
>>> <<
> !!![[##2 Section 2]]
>>> acc<<
> second section content
> goes here....
>>> <<
> !!![[##3 Section 3]]
>>> acc<<
> third section content
> goes here....
>>> <<
> (:div0end:)
>
>
> (:div0 id=accordion:) is essential, as the script looks for that
> object.
>
> 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.
>
>
> ~Hans
>
More information about the pmwiki-users
mailing list