{solved] Accordion in MM list ?

[charled]

Hi everyone,

I'm looking for how to display MM list items as accordions. My items are :
- H2
- Text
- Text
- Text

- H2
- text
- text
- text

H2 must be the toggler to make the three text blocks visible or not.

js_accordion is activated. I tried to copy ce_accordion code but with no success. Thanks for your help.

[zonky]

Hi everyone,

I'm looking for how to display MM list items as accordions. My items are :
- H2
- Text
- Text
- Text

- H2
- text
- text
- text

H2 must be the toggler to make the three text blocks visible or not.

js_accordion is activated. I tried to copy ce_accordion code but with no success. Thanks for your help.

Did I understand correctly that your items are output as follows?

Item 0:
- H2
- Text
- Text
- Text

Item 1:
- H2
- text
- text
- text

If so, you must adapt your template "metamodels_*.html5" accordingly. I would proceed as follows:

* Create a test page and insert an accordion with two elements - check in the FE whether everything is OK.
* look at the source code and build the corresponding DIVs and CSS classes into your MM template.
* you don't have to insert js_accordion.html in the layout - you can also insert the content of the template at the end of your MM-template.

Note that you only have to output one accordeon block in the "foreach" loop that goes through all the items - all the others are created by the loop.

[charled]

Hi Zonky,
Thanks for your answer. I tried. I will try again ;-)

[zonky]

post your template if it does not work

[charled]

Ok, this works but...

1. I think the problem was here

 <div class="<?= $this->toggler ?>"<?php if ($this->headlineStyle): ?> style="<?= $this->headlineStyle ?>"<?php endif; ?>>

$this->toggler 

is empty as it is not a real ce _accordion. So it outputs with ID="".
So I replaced it by

id="ui-id-<?php echo $arrItem['raw']['alias']; ?>"

2. But there is a still little problem : the first item is automatically deployed when the page is loaded. Don't see how to close it by default.

[charled]

And finally I found.

active= false,

in j_accordion options.