Menu icon Foundation
Mark-up Off-canvas

Hi everybody!

I'm trying to set-up an off-canvas with this structure

<div class="off-canvas-wrapper">
   <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
      <div class="title-bar">
         <div class="title-bar-left">
	     <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
	     <span class="title-bar-title">Menu</span>
	 </div>
      </div>
      <div class="off-canvas position-left column row" id="offCanvasLeft" data-off-canvas>
         <ul class="accordion" data-accordion data-allow-all-closed="false">
	    <li class="accordion-item is-active" data-accordion-item>
	      <a class="button small accordion-title" href="#first">Tab1</a>
	      <div id="first" class="accordion-content" data-tab-content>
	         <div class="column row">
	            <p class="scelte"><a href="link1">Link1</a></p>
		    <p class="scelte"><a href="link2">Link2</a></p>
	         </div>
	      </div>
	    </li>
	    <li class="accordion-item" data-accordion-item>
	       <a class="button small accordion-title" href="#second">Tab2</a>
	       <div id="second" class="accordion-content" data-tab-content>
	          <p class="scelte"><a href="link3">Link3</a></p>
		  <p class="scelte"><a href="link4">Link4</a></p>
	       </div>
	    </li>
	 </ul>
       </div>
       <div class="off-canvas-content" data-off-canvas-content>
       </div>
    </div>
 </div>

What kind of mark-up I've to use inside div with "off-canvas-content" class to refer to "link1", "link2".... ?

off-canvasmark-upaccordion

Hi everybody!

I'm trying to set-up an off-canvas with this structure

<div class="off-canvas-wrapper">
   <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
      <div class="title-bar">
         <div class="title-bar-left">
	     <button class="menu-icon" type="button" data-open="offCanvasLeft"></button>
	     <span class="title-bar-title">Menu</span>
	 </div>
      </div>
      <div class="off-canvas position-left column row" id="offCanvasLeft" data-off-canvas>
         <ul class="accordion" data-accordion data-allow-all-closed="false">
	    <li class="accordion-item is-active" data-accordion-item>
	      <a class="button small accordion-title" href="#first">Tab1</a>
	      <div id="first" class="accordion-content" data-tab-content>
	         <div class="column row">
	            <p class="scelte"><a href="link1">Link1</a></p>
		    <p class="scelte"><a href="link2">Link2</a></p>
	         </div>
	      </div>
	    </li>
	    <li class="accordion-item" data-accordion-item>
	       <a class="button small accordion-title" href="#second">Tab2</a>
	       <div id="second" class="accordion-content" data-tab-content>
	          <p class="scelte"><a href="link3">Link3</a></p>
		  <p class="scelte"><a href="link4">Link4</a></p>
	       </div>
	    </li>
	 </ul>
       </div>
       <div class="off-canvas-content" data-off-canvas-content>
       </div>
    </div>
 </div>

What kind of mark-up I've to use inside div with "off-canvas-content" class to refer to "link1", "link2".... ?