Zurb Foundation Accordion Nested Inside Accordion

[Abdo]

This is the first question I've asked on Stack so please forgive me if it's not clear!I'm using Zurb Foundation for a responsive website. I'd like to get an accordion nested inside an accordion using the following HTML structure:\[code\]<ul class="accordion"> <li class="active"> <div class="title">First Accordion Panel Title</div> <div class="content">First Accordion Panel Content</div> </li> <li> <div class="title">Second Accordion Panel Title</div> <div class="content">Second Accordion Panel Content</div> </li> <li> <div class="title">Parent Accordion Panel Title</div> <div class="content"> <ul class="accordion"> <li class="active"> <div class="title">Child Accordion Panel Title</div> <div class="content">Child Accordion Panel Content</div> </li> ... </ul> </div> </li></ul>\[/code\]Looks like with this setup, when the parent accordion panel is opened, the subsequent children accordion panels are opened (or at least some flag is set to open because the arrows are pointing down like the open parent) and the child accordion functionality breaks. I could probably add a jQuery UI accordion inside the Foundation parent accordion, but it wouldn't be responsive like the parent and thus might defeat the purpose of using Foundation in the first place.Has anyone successfully accomplished this?