Refine documentation for accordion menu

diff --git a/docs/pages/accordion-menu.md b/docs/pages/accordion-menu.md
index f5908cf439529ee538131f358655dd837da5b6c4..dfa3b7d1c35ad25d16d1ac39a158d4baed3b44ac 100644 (file)
--- 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>
-```