Question

I’m trying to use Twitter Bootstrap’s pill navigation, but it’s not working properly.

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.

Here’s the PHP. Note that I’m simply including bootstrap.js in my header.

<section id="about" class="section tabbable">
    <!-- Section Title -->
    <?php echo '<h2>' . $section->post_title . '</h2>'; ?>

    <!-- Subsection Title Navigation -->
    <?php if (!empty($section_children)){ //if other sections exist, add them
            echo '<ul class="nav nav-pills" id="an">';
            echo '<li class="active">' . '<a data-toggle="pill" href="#' . $section->post_name . '-content">' . $section->post_title . '</a></li>';

            foreach($section_children as $subsection){
                echo '<li>' . '<a data-toggle="pill" href="#' . $subsection->post_name . '">' . $subsection->post_title . '</a></li>';
            }
            echo '</ul><!--"/.nav-pills"-->';   
          }?>

    <div class="contentArea tab-content">
  <?php echo '<article class="contents tab-pane active" id="' . $section->post_name . '-content">' . apply_filters('the_content', $section->post_content) . '</article><!-- /.contents -->';?>

  <?php if (!empty($section_children)){ //if other sections exist, add them
            foreach($section_children as $subsection){
                echo '<div class="contents tab-pane" id="' . $subsection->post_name . '">';
                echo '<h2>' . $subsection->post_title . '</h2>';
                echo '<article>' . apply_filters('the_content', $subsection->post_content) . '</article></div><!-- /.contents -->';
            }   
        }?>
    </div><!-- /.contentArea -->
</section><!-- /.section -->

Any idea why my content is all always visible and not wrapped into tab panes?

EDIT: Might be easier to look at the generated HTML:

<section id="about" class="section tabbable" style="height: 743px; ">
    <!-- Section Title -->
    <h2>About</h2>      
    <!-- Subsection Title Navigation -->
    <ul class="nav nav-pills" id="an">
        <li class=""><a data-toggle="pill" href="#about-content">About</a></li>
        <li class="active"><a data-toggle="pill" href="#execs">Your Executives</a></li>
        <li class=""><a data-toggle="pill" href="#governing-documents">Governing Documents</a></li>
    </ul><!--"/.nav-pills"-->   
    <div class="contentArea tab-content">
        <div class="contents tab-pane" id="about-content" style="width: 1019px; padding-left: 0px; ">
            <!-- …contents… -->
        </div><!-- /.contents -->     
        <div class="contents tab-pane active" id="execs" style="width: 1019px; padding-left: 0px; ">
            <!-- …contents… -->       
        </div><!-- /.contents -->
        <div class="contents tab-pane" id="governing-documents" style="width: 1019px; padding-left: 0px; ">
            <!-- …contents… -->
        </div><!-- /.contents -->       
    </div><!-- /.contentArea -->
</section>

Answer 1

If you were not properly loading the bootstrap.css file you would be getting this behavior. Or possibly the compilation from LESS is not including the navs.less file.

Otherwise, your code works for me:

JSFiddle