Menu icon Foundation
Extending the Accordion Menu

I'm (new to Foundation 6 for Sites) looking to implement/extend the Accordion Menu using a separate element (button) to toggle the accordion action leaving the link as a navigation element. How might you go about (re)attaching the event?

An example of the markup

<ul class="vertical menu" data-accordion-menu>
  <li>
    <button type="button"><i class="fa fa-caret-down"></i></button><a href="#">Item 1</a>
    <ul class="menu vertical nested">
      <li><a href="#">Item 1A</a></li>
      <li><a href="#">Item 1B</a></li>
    </ul>
  </li>
  <li>
    <button type="button"><i class="fa fa-caret-down"></i></button><a href="#">Item 2</a>
    <ul class="menu vertical nested">
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 2B</a></li>
    </ul>
  </li>
</ul>

Thanks in advance.

Cheers,

James

accordion menu

I'm (new to Foundation 6 for Sites) looking to implement/extend the Accordion Menu using a separate element (button) to toggle the accordion action leaving the link as a navigation element. How might you go about (re)attaching the event?

An example of the markup

<ul class="vertical menu" data-accordion-menu>
  <li>
    <button type="button"><i class="fa fa-caret-down"></i></button><a href="#">Item 1</a>
    <ul class="menu vertical nested">
      <li><a href="#">Item 1A</a></li>
      <li><a href="#">Item 1B</a></li>
    </ul>
  </li>
  <li>
    <button type="button"><i class="fa fa-caret-down"></i></button><a href="#">Item 2</a>
    <ul class="menu vertical nested">
      <li><a href="#">Item 2A</a></li>
      <li><a href="#">Item 2B</a></li>
    </ul>
  </li>
</ul>

Thanks in advance.

Cheers,

James