{solved] Accordion in MM list ?

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.

Quote:

---

Originally Posted by 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.

---

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

HTML Code:

---

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.

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

post your template if it does not work

Ok, this works but...

1. I think the problem was here

PHP Code:

---

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

---

PHP Code:

---

$this->toggler 


---

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

PHP Code:

---

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.

And finally I found.

Code:

---

active= false,

---

in j_accordion options.