From: Geoff Kimball <geoff@zurb.com>
Date: Tue, 19 Jan 2016 23:27:22 +0000 (-0800)
Subject: Refine documentation for accordion menu
X-Git-Tag: v6.1.2~20^2~2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=aedf49275d6f0beed901a85789f40a292b5d6506;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Refine documentation for accordion menu
---

diff --git a/docs/pages/accordion-menu.md b/docs/pages/accordion-menu.md
index f5908cf43..dfa3b7d1c 100644
--- a/docs/pages/accordion-menu.md
+++ b/docs/pages/accordion-menu.md
@@ -5,11 +5,37 @@ js: js/foundation.accordionMenu.js
 description: Change a basic vertical Menu into a expandable accordion menu with the Accordion Menu plugin.
 ---
 
-```html_example
+## Basics
+
+Accordion menus follow the basic [Menu](menu.html) syntax of `<ul>`, `<li>`, and `<a>`. To convert a basic menu into an accordion, add the attribute `data-accordion-menu`. You probably also want it to be vertical, so add the class `.vertical` as well.
+
+Any `<a>` will behave like a standard link. However, any `<a>` paired with a nested `<ul>` menu will then slide that sub-menu up and down when clicked on.
+
+<div class="primary callout">
+  <p>You can use the build-in <code>.nested</code> class to add an indent to a nested menu.</p>
+</div>
+
+<div class="primary callout">
+  <p>To have a sub-menu already open when the page loads, add the class <code>.is-active</code> to that sub-menu.</p>
+</div>
+
+```html
+<ul class="vertical menu" data-accordion-menu>
+  <li>
+    <a href="#">Item 1</a>
+    <ul class="menu veritcal nested">
+      <li><a href="#">Item 1A</a></li>
+      <li><a href="#">Item 1B</a></li>
+    </ul>
+  </li>
+  <li><a href="#">Item 2</a></li>
+</ul>
+```
+
 <ul class="vertical menu" data-accordion-menu>
   <li>
     <a href="#">Item 1</a>
-    <ul class="menu vertical nested is-active">
+    <ul class="menu vertical nested">
       <li>
         <a href="#">Item 1A</a>
         <ul class="menu vertical nested">
@@ -31,4 +57,3 @@ description: Change a basic vertical Menu into a expandable accordion menu with
   </li>
   <li><a href="#">Item 3</a></li>
 </ul>
-```