Porting the existing JSF components to a Spring-MVC based was harder than it ought to have been.

 Reverse engineering the markup is not great because it's not clear which fields are missing, given the current configuration. Reverse engineering the rendering code is not ideal because the Tag structure isn't mapped one-to-one to the same functional blocks as a JSF renderer. Comparing the actual output with the intended output repeatedly as a development process is very slow.

Here is the output from the JSF accordion Renderer. This is easier than the Tabset, but still complicated:

<div id="ACCID" class="mobi-accordion" data-opened="tab1">
                
  <section id="tab1" class="open">
    <div class="handle" onclick="ice.mobi.accordionController.toggleClient('ACCID', this, false);">
      <div class="pointer">&#9658;</div>First drop down item
    </div>
    <input name='submitB' class='mobi-button mobi-button-important' type='submit' value='Button 1'/>
  </section>
  <section id="tab2" class="closed">
    <div class="handle" onclick="ice.mobi.accordionController.toggleClient('ACCID', this, false);">
      <div class="pointer">&#9658;</div>Second drop down item
    </div>
    <input name='submitC' class='mobi-button mobi-button-important' type='submit' value='Button 2'/>
  </section>
  <section id="tab3" class="closed">
    <div class="handle" onclick="ice.mobi.accordionController.toggleClient('ACCID', this, false);">
      <div class="pointer">&#9658;</div>Third drop down item
    </div>
    <input name='submitA' class='mobi-button mobi-button-important' type='submit' value='Button 3'/>
  </section>
                
</div>
<span id="ACCID_script">
  <script type="text/javascript"> ice.mobi.accordionController.initClient('ACCID',{ autoheight: true, maxheight: '0'});</script></span>