From d10f96bc9b016cd59621b9c87993495573171652 Mon Sep 17 00:00:00 2001
From: "Brian P. Hogan" <brianhogan@napcs.com>
Date: Thu, 17 Nov 2011 10:14:46 -0600
Subject: [PATCH] made tabs work without JavaScript as this was a requirement
 for our accessibility guidelines.

---
 index.html           | 19 +++++++++++++++++++
 javascripts/tabs.js  |  5 ++++-
 stylesheets/base.css |  1 -
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 5c1487a..ec9af61 100644
--- a/index.html
+++ b/index.html
@@ -65,6 +65,25 @@
 			<h3>Docs &amp; Support</h3>
 			<p>The easiest way to really get started with Skeleton is to check out the full docs and info at <a href="http://www.getskeleton.com">www.getskeleton.com.</a>. Skeleton is also open-source and has a <a href="https://github.com/dhgamache/skeleton">project on git</a>, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at <a href="mailto:hi@getskeleton.com">hi@getskeleton.com</a>.</p>
 		</div>
+		
+	 <div class="sixteen columns">
+	   <h3>Support for simple tabs</h3>
+	   <!-- Standard <ul> with class of "tabs" -->
+     <ul class="tabs">
+       <li><a class="active" href="#simple">Simple</a></li>
+       <li><a href="#lightweight">Lightweight</a></li>
+       <li><a href="#mobileFriendly">Mobile</a></li>
+       <li><a href="#accessible">Accessible</a></li>
+     </ul>
+
+     <ul class="tabs-content">
+       <!-- Give ID that matches HREF of above anchors -->
+       <li class="active" id="simple">The tabs are clean and simple unordered-list markup and basic CSS</li>
+       <li id="lightweight">The tabs are cross-browser, but don't need a ton of hacky CSS or markup.</li>
+       <li id="mobileFriendly">The tabs work like a charm even on mobile devices.</li>
+       <li id="accessible">The content of the tabs is still visible even when JavaScript is disabbled.</li>
+     </ul>
+	 </div>
 
 	</div><!-- container -->
 
diff --git a/javascripts/tabs.js b/javascripts/tabs.js
index 8a74b10..3c4478c 100644
--- a/javascripts/tabs.js
+++ b/javascripts/tabs.js
@@ -12,9 +12,12 @@ $(document).ready(function() {
 
 	/* Tabs Activiation
 	================================================== */
+  // Use CSS to hide the tabs
+  $("ul.tabs-content > li").css("display", "none");
+  $("ul.tabs-content > li.active").css("display", "block");
 
 	var tabs = $('ul.tabs');
-
+  
 	tabs.each(function(i) {
 
 		//Get all tabs
diff --git a/stylesheets/base.css b/stylesheets/base.css
index 9bd76f6..e316548 100644
--- a/stylesheets/base.css
+++ b/stylesheets/base.css
@@ -254,7 +254,6 @@
 		border-top-right-radius: 2px; }
 
 	ul.tabs-content { margin: 0; display: block; }
-	ul.tabs-content > li { display:none; }
 	ul.tabs-content > li.active { display: block; }
 
 	/* Clearfixing tabs for beautiful stacking */