title: Box with tabbed navigation using semantic markup structure?
body: <p>I'm trying to create an info box with tabs for switching the content of the box, like this: <a href="http://www.cssnewbie.com/build-a-tabbed-box-with-css-and-jquery/" rel="nofollow">http://www.cssnewbie.com/build-a-tabbed-box-with-css-and-jquery/</a></p>
  
  <p>Easy peasy with some CSS and jQuery right? The problem is I'm trying to figure out a way to do it with semantic markup, so that when CSS/JS are disabled, it just shows the headings with their content in the correct order. All of the examples I've seen do something like this:</p>
  
  <pre><code>&lt;div id="box-nav"&gt;
      &lt;ul&gt;
          &lt;li&gt;Content head 1&lt;/li&gt;
          &lt;li&gt;Content head 2&lt;/li&gt;
          &lt;li&gt;Content head 3&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="box-content"&gt;
      &lt;div id="content-1"&gt;
          &lt;p&gt;Blah 1. &lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="content-2"&gt;
          &lt;p&gt;Blah 2. &lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="content-3"&gt;
          &lt;p&gt;Blah 3. &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>which makes it pretty easy to build by separating the headings and their content, but I want to make one using this markup:</p>
  
  <pre><code>&lt;div id="content-1"&gt;
      &lt;h2&gt;Content head 1&lt;/h2&gt;
      &lt;p&gt;Blah 1. &lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="content-2"&gt;
      &lt;h2&gt;Content head 2&lt;/h2&gt;
      &lt;p&gt;Blah 2. &lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="content-3"&gt;
      &lt;h2&gt;Content head 3&lt;/h2&gt;
      &lt;p&gt;Blah 3. &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>so that it degrades gracefully as plain HTML, but I can't quite figure it out without using jQuery to re-arrange the markup.</p>
  
  <p>Anyone know a clean way of doing this?</p>