title: Using pill navigation for twitter Bootstrap
body: <p>I'm trying to use Twitter Bootstrap's pill navigation, but it's not working properly.</p>
  
  <p>I do have the "active" class added to my tab-content. However, that's all that happens – I don't actually see any change in the content whatsoever. All the content is simply displayed sequentially, and not wrapped into tab panes.</p>
  
  <p>Here's the PHP. Note that I'm simply including bootstrap.js in my header.</p>
  
  <pre><code>&lt;section id="about" class="section tabbable"&gt;
      &lt;!-- Section Title --&gt;
      &lt;?php echo '&lt;h2&gt;' . $section-&gt;post_title . '&lt;/h2&gt;'; ?&gt;
  
      &lt;!-- Subsection Title Navigation --&gt;
      &lt;?php if (!empty($section_children)){ //if other sections exist, add them
              echo '&lt;ul class="nav nav-pills" id="an"&gt;';
              echo '&lt;li class="active"&gt;' . '&lt;a data-toggle="pill" href="#' . $section-&gt;post_name . '-content"&gt;' . $section-&gt;post_title . '&lt;/a&gt;&lt;/li&gt;';
  
              foreach($section_children as $subsection){
                  echo '&lt;li&gt;' . '&lt;a data-toggle="pill" href="#' . $subsection-&gt;post_name . '"&gt;' . $subsection-&gt;post_title . '&lt;/a&gt;&lt;/li&gt;';
              }
              echo '&lt;/ul&gt;&lt;!--"/.nav-pills"--&gt;';   
            }?&gt;
  
      &lt;div class="contentArea tab-content"&gt;
    &lt;?php echo '&lt;article class="contents tab-pane active" id="' . $section-&gt;post_name . '-content"&gt;' . apply_filters('the_content', $section-&gt;post_content) . '&lt;/article&gt;&lt;!-- /.contents --&gt;';?&gt;
  
    &lt;?php if (!empty($section_children)){ //if other sections exist, add them
              foreach($section_children as $subsection){
                  echo '&lt;div class="contents tab-pane" id="' . $subsection-&gt;post_name . '"&gt;';
                  echo '&lt;h2&gt;' . $subsection-&gt;post_title . '&lt;/h2&gt;';
                  echo '&lt;article&gt;' . apply_filters('the_content', $subsection-&gt;post_content) . '&lt;/article&gt;&lt;/div&gt;&lt;!-- /.contents --&gt;';
              }   
          }?&gt;
      &lt;/div&gt;&lt;!-- /.contentArea --&gt;
  &lt;/section&gt;&lt;!-- /.section --&gt;
  </code></pre>
  
  <p>Any idea why my content is all always visible and not wrapped into tab panes?</p>
  
  <p>EDIT: Might be easier to look at the generated HTML:</p>
  
  <pre><code>&lt;section id="about" class="section tabbable" style="height: 743px; "&gt;
      &lt;!-- Section Title --&gt;
      &lt;h2&gt;About&lt;/h2&gt;      
      &lt;!-- Subsection Title Navigation --&gt;
      &lt;ul class="nav nav-pills" id="an"&gt;
          &lt;li class=""&gt;&lt;a data-toggle="pill" href="#about-content"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li class="active"&gt;&lt;a data-toggle="pill" href="#execs"&gt;Your Executives&lt;/a&gt;&lt;/li&gt;
          &lt;li class=""&gt;&lt;a data-toggle="pill" href="#governing-documents"&gt;Governing Documents&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;&lt;!--"/.nav-pills"--&gt;   
      &lt;div class="contentArea tab-content"&gt;
          &lt;div class="contents tab-pane" id="about-content" style="width: 1019px; padding-left: 0px; "&gt;
              &lt;!-- …contents… --&gt;
          &lt;/div&gt;&lt;!-- /.contents --&gt;     
          &lt;div class="contents tab-pane active" id="execs" style="width: 1019px; padding-left: 0px; "&gt;
              &lt;!-- …contents… --&gt;       
          &lt;/div&gt;&lt;!-- /.contents --&gt;
          &lt;div class="contents tab-pane" id="governing-documents" style="width: 1019px; padding-left: 0px; "&gt;
              &lt;!-- …contents… --&gt;
          &lt;/div&gt;&lt;!-- /.contents --&gt;       
      &lt;/div&gt;&lt;!-- /.contentArea --&gt;
  &lt;/section&gt;
  </code></pre>