0

I am trying to show some Bootstrap tab contents within a WordPress loop. The tabs are not being clicked.

Here are the bootstrap codes:

        <ul class="citenav nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1-<?php echo get_the_ID(); ?>" role="tab" aria-controls="tab1" aria-selected="true">tab18</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab2-<?php echo get_the_ID(); ?>" role="tab" aria-controls="tab2" aria-selected="false">tab2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="tab3-tab" data-toggle="tab" href="#tab3-<?php echo get_the_ID(); ?>" role="tab" aria-controls="tab3" aria-selected="false">tab3</a>
          </li>
            <li class="nav-item">
            <a class="nav-link" id="tab4-tab" data-toggle="tab" href="#tab4-<?php echo get_the_ID(); ?>" role="tab" aria-controls="tab4" aria-selected="false">tab4</a>
          </li>
        </ul>

        <div class="tab-content" id="myTabContent">
          <div class="cite tab-pane fade show active" id="tab1-<?php echo get_the_ID(); ?>" role="tabpanel" aria-labelledby="tab1-tab">
              <?php echo "tab1 content"; ?>
          </div>
          <div class="cite tab-pane fade" id="tab2-<?php echo get_the_ID(); ?>" role="tabpanel" aria-labelledby="tab2-tab">
              <?php echo "tab2 content"; ?>
          </div>
          <div class="cite tab-pane fade" id="tab3-<?php echo get_the_ID(); ?>" role="tabpanel" aria-labelledby="tab3-tab">
            <?php echo "tab3 content"; ?>
          </div>
            <div class="cite tab-pane fade" id="tab4-<?php echo get_the_ID(); ?>" role="tabpanel" aria-labelledby="tab4-tab">
            <?php echo "tab4 content"; ?>
          </div>
        </div>

        <style>
            .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
            color: #495057;
            background-color: #fff;
            border-color: #ddd #ddd #fff;
        }

        .nav-tabs .nav-link {
            border: 1px solid transparent;
            border-top-left-radius: .25rem;
            border-top-right-radius: .25rem;
        }
        .nav-link {
            display: block;
            padding: .5rem 1rem;
        }
        </style>

Also, please be noted that these codes are used as a template parts. I tried it in Ajax load more repeater template, then the tabs are working.

UPDATE: Adding JQuery external link within just solved the issue.

0

I think that's because Bootstrap use document.on('click', 'selector', function ).

This means that the function will execute only when the click event reached the document Node.

I tested and If you have a parent element which does not propagate the 'click' event, then that can be a reason of why your code doesn't work...

Ex:

parentNodeOfTab.on( 'click', function(){
   // Code

   return false;
} );

or

parentNodeOfTab.on( 'click', function( event){
   event.stopPropagation();

   // Code
} );

P.S: You can Google and read more about JavaScript propagation.

  • Just adding Jquery link solved the problem. Thanks anyway. – Noobie Feb 26 at 18:21

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.