title: How to change vertically tabbed content panel into responsive collapsible with media queries and jquery?
body: <p>I am attempting to build a content navigation pattern that uses vertically stacked tabs to toggle the display of hidden content panels next to the tabs. At smaller widths, this pattern breaks. </p>
  
  <p>Heres my fiddle: <a href="http://jsfiddle.net/jrotton/xCeX8/1/" rel="nofollow">http://jsfiddle.net/jrotton/xCeX8/1/</a></p>
  
  <p>It is somewhat responsive...but lets say I have 12 tabs and the length of their labels range from "Nursing" to "Architecture, Design, and Construction". This breaks when the screen gets below 500px or so. </p>
  
  <p>I could: </p>
  
  <pre><code>.contextNav { width: 100%; }
  ul.checklist-select li { display:inline-block; }
  </code></pre>
  
  <p>..it works but it not ideal when you have more than a few tabs. 
  I would rather hide the tab menu and change the panels into collapsibles with clickable h2's. It's also important that the pattern is screen-reader-accessible but I haven't made it that far yet.  </p>
  
  <p>Any ideas on how I could do this? Thanks in advance..</p>