Foundation 5 accordion panel

[hansv]

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> ';

[LostKobrakai]

Just the foreach loop:

foreach ($page->children as $child){
	$link = "<a href='#panel_$child->id'>$child->title</a>";
	
	// Only one content div per accordion				   		  
	$body = "<div id='panel_$child->id' class='content'>"; 

	foreach ($child->children as $childsub){
		$body .= "<div>"; // div per content row
		$body .= "  <img src='{$childsub->icon->url}'>";
		$body .= "  $childsub->title  $childsub->uitleg";
		$body .= "</div>";
	}

	$body .= "</div>";

	$content .= "<li class='accordion-navigation'>{$link}{$body}</li>";
}

[hansv]

Wow, I make it always to complicated, and in processwire, it's always so compact.

This works perfectly,

Thx LostKobrakai for your excellent en very quck reaction

[LostKobrakai]

There's nothing more processwirey in it than in your code. It's more about clean code structure.