[TYPO3-english] gridelements accordion

["HocomAdvies [  Wiechert Hooghwinkel]

Hi, I'am trying to get the hang off Grid elements. Started with some simple CE such as 2 column and 3 column CE thats all clear. Now I wanted to try to create a more difficult CE an accordion element. 
Since I adopted Foundation for my project, I had a look at their accordion and tried to build a grid element using that setup. 

Here you can see the sample html Zurb Foundation proposed http://foundation.zurb.com/docs/components/accordion.html 

And this is what I have for my Gridelement TSsetup

#grid setup
tt_content.gridelements_pi1.20.10.setup {
    # ID - alias of the gridelement
    1_col_accordion < lib.gridelements.defaultGridSetup
    1_col_accordion {
        columns {
            # colPos ID
            0 < .default
            0.wrap = <div id="panel1a" class="content active">|</div>
            } 
           wrap = <a href="#panel1a">|</a>
     }
    ##wrap the li class
    wrap = <li class="accordion-navigation">|</li>    
} 
##wrap it all in the accordion ul
wrap = <ul class="accordion data-accordion">|</div>


The html which should be shown in the frontend (this is for one panel)
<ul class="accordion" data-accordion>
  <li class="accordion-navigation">
    <a href="#panel1a">Accordion 1</a>
    <div id="panel1a" class="content active">
      Panel 1.
    </div>
  </li></ul>
So this is not working. Also now I tried to create just one panel. But obviously most times there wil be more than one panel in the accordion. And than the Href and the panel id should be flexibel as well. 
How to achieve this? Can this be done with the us of a flexform, like this
stdWrap {
            prepend = COA
            prepend {
                10 = TEXT
                10 {
                    data = field:flexform_headline
                    wrap = <a href="#{field:flexform_headline}">|</a>
                    required = 1
                }
Or are there better ways to approach this? 

HocomAdvies
Wiechert Hooghwinkel