Dynamic bootstrap tabs with post_title doesn’t display the_content

If the above code is looping through in a while loop is should be outputting the tabs correctly, but not the content.

You need to repeat this loop again within the tab-content area. Also you need make sure that every table content area does not have class of active. The active class should only be on the first one. You can use a counter within your loop and a shorthand if statement to add the class of active if the counter is 1

<div id="tab">
    <ul class="nav nav-tabs" role="tablist">
        <?php $loop = new WP_Query( array( 'post_type' => 'candidates', 'posts_per_page' => -1 ) ); ?>
        <?php 
        $counter = 0;
        while ( $loop->have_posts() ) : $loop->the_post(); 
            $counter++;
        ?>
            <li role="presentation" class="post-<?php the_ID(); ?> <?=($counter == 1) ? 'active' : ''?>"><a href="#post-<?php the_ID(); ?>" aria-controls="home" role="tab" data-toggle="tab"><?php the_title();?></a></li>
        <?php endwhile; wp_reset_query(); ?>
    </ul>
    <div class="tab-content">
        <?php
        $counter = 0;
        $loop = new WP_Query( array( 'post_type' => 'candidates', 'posts_per_page' => -1 ) );
        while ( $loop->have_posts() ) : $loop->the_post(); 
            $counter++;
        ?>
            <div role="tabpanel" class="tab-pane <?=($counter == 1) ? 'active' : ''?>" id="post-<?php the_ID(); ?>"><?php the_content();?></div>
        <?php endwhile; ?>
    </div>
</div>

Note that I haven’t actually tried this, so let me know if it doesn’t work.