From: mmikitka <matt@mikitka.net>
Date: Mon, 3 Mar 2014 17:37:28 +0000 (-0500)
Subject: Updated tabs documentation with deep linking feature
X-Git-Tag: v5.2.0~29^2~4^2
X-Git-Url: http://git.ipfire.org/gitweb/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F4550%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

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
index 000000000..e4e364c12
--- /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 ae01abfd3..ec2cbc642 100644
--- 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.