display child pages in accordion style

hello,

i open a new subject to this problem:


i tried something for showing childpages in accordion way, it’s almost working:

here is the code that i place in the parent page :

[[Ditto? &parents=`[*id*]` &tpl=`content_block` &noResults=` ` &orderBy=`menuindex ASC` ]]

and at the end of the page, before body tag:

<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
//-->
</script>

here is the chunk called content_block:

<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">[+title+]</div>
<div class="AccordionPanelContent">[+content+]</div>
</div>
</div>

to do that, i used js and css file from adobe (since i bought these products, why not use them Grin)

<link rel="stylesheet" type="text/css" media="all" href="assets/templates/general/SpryAccordion.css" />
<script type="text/javascript" src="assets/js/SpryAccordion.js"></script>

the result ?

it displays my childpages well, title in the tab and content in the panel content, but nothing is animated...

if someone has an idea why...

hi,

well, i don’t know spry (i use mootools for nearly all my js) but seeing this

and your chunk, the script seems to be applied to a div with an id (Accordion1 here)

then i would suggest to you try putting this div in the page source code with ths snippet call inside and, in you chunk, to keep only what is supposed to be repeated


this will help your page being xhtml valid too as in a page you can have only one element with an specific id, in your case you were repeating the surrounding id too

hope it helps

have swing

thank you!

i also tried with mootools js, si if you can tell me how you used it, it would be great !

thanks !

hi,

well, with mootools, it would be the same when it comes to the main surrounding div (not necessary with moo) and the repeated parts (triggers and elements)

what would change is the js that, in your case, would be something like


all this having to be inside a window.addEvent(’domready’, function(){...}); call to work of course

have swing

thank you very much virtualgadjo !!

i made the change you said in the chunk, and now it’s working !