[pmwiki-users] Including an Accordion widget

[Hans]

Tuesday, February 15, 2011, 11:20:14 AM, Harald C. wrote:

> 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....
Tuesday, February 15, 2011, 11:20:14 AM, Harald C. wrote:

> With the script as is one has to start the numbering in the custom link
> markup at '0' instead of '1'

my mistake!
change the Accordion function to read  like this,
d[n-1] instead of d[n]:

                function Accordion(n) {
                        d = HideDivs(\"accordion\");
                        d[n-1].style.display = \"block\";
                };

empty lines between div sections show because they are
part of the surrounding div.

I'll release a modified recipe script soon, which will also allow
nesting of hidden divs.


  ~Hans