[pmwiki-users] Including an Accordion widget

[Harald C.]

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
>