Updated tabs documentation with deep linking feature

diff --git a/doc/includes/tabs/examples_tabs_deep_linking.html b/doc/includes/tabs/examples_tabs_deep_linking.html
new file mode 100644 (file)
index 0000000..e4e364c
--- /dev/null
+++ b/doc/includes/tabs/examples_tabs_deep_linking.html
@@ -0,0 +1,13 @@
+<dl class="tabs" data-tab data-options="deep_linking: true">
+  <dd class="active"><a href="#tabs-deeplink-1">Tab 1</a></dd>
+  <dd><a href="#tabs-deeplink-2">Tab 2</a></dd>
+</dl>
+<div class="tabs-content">
+  <div class="content active" id="tabs-deeplink-1">
+    <p>First panel content goes here...</p>
+  </div>
+  <div class="content" id="tabs-deeplink-2">
+    <p>Second panel content goes here...</p>
+    <p id="tabs-deeplink-content-2">Test content</p>
+  </div>
+</div>

diff --git a/doc/pages/components/tabs.html b/doc/pages/components/tabs.html
index ae01abfd33adbf09da7a7e82c1e189e7a88f7dfc..ec2cbc6427cdf99f90db1d2831187d90aa532905 100644 (file)
--- a/doc/pages/components/tabs.html
+++ b/doc/pages/components/tabs.html
@@ -61,6 +61,16 @@ You can create a group of vertical tabs using minimal markup.
 
 ***
 
+### Deep linking to tabs or tab contents
+
+The tabs Foundation component can parse the location hash value and open the corresponding tab content pane. If the location hash maps to an element ID within a tab content pane, then the appropriate tab will become active and the browser window will scroll to the specified element. If you do not want to scroll to the specified element then set `data-options="scroll_to_content: false"`.
+
+In the following example, deep linking is enabled. If the location hash is `#tabs-deeplink-2` then the second tab will become active. If the location hash is `#tabs-deeplink-content-2` then the second tab will become active, and the browser will scroll to the paragraph tag with ID, tabs-deeplink-content-2.
+
+<!-- {{> examples_tabs_deep_linking}} -->
+
+***
+
 ### Callbacks
 
 There are two ways to bind to callbacks in your tabs.