Search the Community

I trie to integrate the Foundation 5 accordion panel in my template. It works fine (see attachement), the only problem is that all panels become active in stead of only the active panel. Starting point: accordion Foundation 5 <ul class="small-block-grid-1 medium-block-grid-3"> <li> <ul class="accordion" data-accordion="myAccordionGroup"> <li class="accordion-navigation"> <a href="#panel1c">Accordion 1</a> <div id="panel1c" class="content"> Panel 1. Lorem ipsum dolor </div> </li> <li class="accordion-navigation"> <a href="#panel2c">Accordion 2</a> <div id="panel2c" class="content"> Panel 2. Lorem ipsum dolor </div> </li> <li class="accordion-navigation"> <a href="#panel3c">Accordion 3</a> <div id="panel3c" class="content"> Panel 3. Lorem ipsum dolor </div> </li> </ul> </li> <li> <ul class="accordion" data-accordion="myAccordionGroup"> <li class="accordion-navigation"> <a href="#panel4c">Accordion 4</a> <div id="panel4c" class="content"> Panel 4. Lorem ipsum dolor </div> </li> <li class="accordion-navigation"> <a href="#panel5c">Accordion 5</a> <div id="panel5c" class="content"> Panel 5. Lorem ipsum dolor </div> </li> <li class="accordion-navigation"> <a href="#panel6c">Accordion 6</a> <div id="panel6c" class="content"> Panel 6. Lorem ipsum dolor </div> </li> </ul> </li> </ul> Implementation in template-file Processwire The problem = the panel-names. In each foreach-loop the panel name is the same. In Foundation-term the panel name must change for each accordion panel. The solution cut be place a counter, but I fail implementing it in the code $content .= ' <a href="#panel">'; and $content .= ' <div id="panel" class="content">'; All code-examples are welcome $content .= '<ul class="small-block-grid-1 medium-block-grid-2">'; $content .= ' <ul class="accordion" data-accordion="myAccordionGroup">'; foreach ($page->children as $child): $content .= ' <li class="accordion-navigation"> '; $content .= ' <a href="#panel">'; $content .= $child->title ; $content .= ' </a> '; if($child->hasChildren()) { foreach ($child->children as $childsub): $content .= ' <div id="panel" class="content">'; $content .= ' '; $content .= ' <img src='; $content .= $childsub->icon->url; $content .= ' >'; $content .= ' '; $content .= $childsub->title; $content .= ' '; $content .= $childsub->uitleg; $content .= ' </div> '; endforeach; }; // end if $content .= ' </li> '; endforeach; $content .= ' </ul> '; $content .= '</ul> ';