0

Im trying to use bootstrap tabs to have a tab system following:

Each tab has the_title (post title), on click of each tab, display the content.

So far, I have all the tab listed correctly, and the first one appear with the good content. However, on Click to another tab, the content doesn't change to show the one it should.

I suppose I need to give a class postID for that and link the Href to this same class post ID.

Below is the code im trying to make work - unsuccessfully :(:

<?php get_header(); ?>

 <div class="container ">

<div id="tab">
<ul class="nav nav-tabs" role="tablist">
    <?php $loop = new WP_Query( array( 'post_type' => 'candidates', 'posts_per_page' => -1 ) ); ?>
  <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

<li role="presentation" class="post-<?php the_ID(); ?>"><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">
<div role="tabpanel" class="tab-pane active" id="post-<?php the_ID(); ?>"><?php the_content();?></div>

   </div>

    </div>

Any help would be awesome :) :)

Thank you guys !

  • You don't have a loop for outputting different content. You are only outputting the content once. – czerspalace Jun 23 '15 at 22:40
  • Thank you :) how can I achieve that ? – tibewww Jun 23 '15 at 22:46
  • You can try something like the following link shows: wordpress.stackexchange.com/questions/190387/… – czerspalace Jun 23 '15 at 23:54
  • Hi, Thank you guys. I've try the code from your link czerpalace, But it doenst work for me...i get an error in the last line . .can not nderstand why :( – tibewww Jun 25 '15 at 0:03
  • What is the error? Can you edit your question to show the code you are trying now? – czerspalace Jun 25 '15 at 0:05
2

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.

  • with this code i display choices from custom field type select (some categorys), but i have dublicate tabs. how to display only one tab of category? – voronovam Jul 11 '17 at 4:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.