From: Brock Duncan <bduncan@tkg.com>
Date: Wed, 26 Apr 2017 12:59:39 +0000 (-0400)
Subject: accordion/tabs values order
X-Git-Tag: v6.4.0-rc1~46^2~64^2~1^2~1
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=f2040f476e6c908f49db818775e1cd47756b554f;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

accordion/tabs values order

Show two html examples of data-responsive-accordion-tabs values in different orders.
---

diff --git a/docs/pages/responsive-accordion-tabs.md b/docs/pages/responsive-accordion-tabs.md
index 8f263b077..3f5956bc3 100644
--- a/docs/pages/responsive-accordion-tabs.md
+++ b/docs/pages/responsive-accordion-tabs.md
@@ -29,6 +29,22 @@ Accordion content should also have an ID, or the # of the href should be specifi
 </ul>
 ```
 
+<div class="secondary callout">
+  <p>The accordion/tabs values can be in any order.</p>
+</div>
+
+```html
+<ul class="tabs" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
+  <li class="accordion-item is-active" data-accordion-item>
+    <a href="#" class="accordion-title">Accordion 1</a>
+    <div class="accordion-content" data-tab-content>
+      I would start in the open state, due to using the `is-active` state class.
+    </div>
+  </li>
+  <!-- ... -->
+</ul>
+```
+
 <div class="secondary callout">
   <p>Once you put it all together, here's what you get!<br>Scale your browser down to see the toggle happen.<br>I am an `Accordion on small and large` but I am `Tabs on medium`</p>
 </div>