Advanced Custom Fields, WordPress, Javascript Tabbed Content

Question

(function(){
    $('ul.tabs li').on("click", function(){
        var tab_id = $(this).find("li").attr('data-tab');

        $('ul.tabs li .tab-link').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#"+tab_id).addClass('current');

    });

.container{
    margin: 0 auto;
}

ul.tabs{
    margin: 0px;
    padding: 0px;
    list-style: none;
}

ul.tabs li{
    background: none;
    color: #222;
    display: inline-block;
    padding: 10px 15px;
    cursor: pointer;
}

ul.tabs li.current{
    background: #ededed;
    color: #222;
}

.tab-content{
    display: none;
    background: #ededed;
    padding: 15px;
}

.tab-content.current{
    display: inherit;
}

<div class="container">
    <?php if( have_rows('tabs') ): ?>
    <ul class="tabs">
        <?php while ( have_rows( 'tabs' ) ) : the_row(); ?>
        <?php $index = get_row_index(); ?>
        <li class="tab-link <?php if ($index == 0): ?>current<?php endif; ?>" data-tab="tab-<?php echo $index; ?>">
            <?php echo get_sub_field('services_title'); ?></li>
        <?php endwhile; ?>
    </ul>

    <?php while( have_rows('tabs') ): the_row(); ?>
    <?php $index = get_row_index(); ?>
    <div id="tab-<?php echo $index; ?>" class="tab-content <?php if ($index == 0): ?>current<?php endif; ?>">
        <?php echo get_sub_field('services_description'); ?>
    </div>
    <?php endwhile; ?>
    <?php else : ?>
    <?php // no rows found ?>
    <?php endif; ?>
</div>

**

I am looking for help getting my javascript to make a final connection to my HTML/PHP WordPress code. I believe the javascript isn't targeting something correctly to be able to add the class of current to a tab- echo index section.

I've used php to to get the tab - index number on each section and just having trouble adding and removing the class of current to the additional postings.

I believe var tab_id = $(this).find("li").attr('data-tab'); should be var tab_id = $(this).attr('data-tab'); and $('ul.tabs li .tab-link').removeClass('current'); should be $('ul.tabs li.tab-link').removeClass('current');. The reason is that you're already targeting the LI element here: $('ul.tabs li').on("click", function(){. (Also, next time please post the actual HTML output - remember that we can't run your PHP code here and so it can be difficult to tell what the resulting HTML will look like.) — cabrerahector
Sorry new to posting here - I don't know if I know how to do that! I'll learn as I go :) - No luck with the above changes. — Bec
Just copy the HTML output you see on your page (check the HTML source code, but only grab the relevant parts of your code), then edit your question to include it. That way we're only dealing with HTML/CSS/JS here and it's easier for us to reproduce what you're seeing over there. — cabrerahector
Ok thanks - these pretty much are the relevant parts of the code though. :) — Bec

Mason Mason · Accepted Answer · 2021-03-06T15:53:55

There are some issues with your js file. Try this:

jQuery(document).ready(function($) {
  $(".tabs li").each(function() {
    $(this).on("click", function() {
      var tab_id = $(this).attr('data-tab');

      $('.tabs .tab-link.current').removeClass('current');
      $('.tab-content.current').removeClass('current');

      $(this).addClass('current');
      $("#" + tab_id).addClass('current');
    });
  });
});

You can see this jsfiddle for demo.

Advanced Custom Fields, WordPress, Javascript Tabbed Content

1 Answers