In your WordPress editor, switch to the Text mode and locate the custom field you added in step 1. Wrap the content of that field with the necessary HTML structure for tabs. For example:
PHP Code
<div class="row">
<ul class="nav nav-tabs" id="Section4Tab" role="tablist">
<?php $i = 1; if( have_rows('tab_view') ): ?>
<?php while( have_rows('tab_view') ) : the_row(); ?>
<li class="nav-item" role="presentation">
<button class="nav-link" id="Section4Tab<?php echo $i;?>-tab" data-bs-toggle="tab" data-bs-target="#Section4Tab<?php echo $i;?>" type="button" role="tab" aria-controls="Section4Tab<?php echo $i;?>" aria-selected="true"><p><?php the_sub_field('number'); ?>.</p> <h6 style="color:<?php the_sub_field('color'); ?>"><?php the_sub_field('tab_name'); ?></h6></button>
</li>
<?php $i++; endwhile; ?>
<?php endif; ?>
</ul>
<div class="tab-content" id="Section4TabContent">
<?php $i = 1; if( have_rows('tab_view') ): ?>
<?php while( have_rows('tab_view') ) : the_row(); ?>
<div class="tab-pane fade" id="Section4Tab<?php echo $i;?>" role="tabpanel" aria-labelledby="Section4Tab<?php echo $i;?>-tab">
<div class="row">
<div class="col-md-4 home-section-4-Content-left">
<h1 style="color:<?php the_sub_field('color'); ?>"><?php the_sub_field('heading'); ?></h1>
<?php
$link = get_sub_field('know_more_button');
if( $link ):
$link_url = $link['url'];
$link_title = $link['title'];
$link_target = $link['target'] ? $link['target'] : '_self';
?>
<a class="btn comman-btn-1" href="<?php echo esc_url( $link_url ); ?>" target="<?php echo esc_attr( $link_target ); ?>"><span><?php echo esc_html( $link_title ); ?></span></a>
<?php endif; ?>
</div>
<div class="col-md-8 home-section-4-Content-right">
<div class="row">
<?php if( have_rows('box') ): ?>
<?php while( have_rows('box') ) : the_row(); ?>
<div class="col-md-6">
<div class="home-section-4-Content-right-box">
<img src="<?php the_sub_field('image'); ?>" class="img-fluid" alt="">
<p><?php the_sub_field('heading'); ?></p>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
<?php $i++; endwhile; ?>
<?php endif; ?>
</div>
</div>
Query Code
$('#Section4Tab .nav-item:nth-child(1) .nav-link').addClass('active');
$('#Section4TabContent .tab-pane:nth-child(1)').addClass('active');
$('#Section4TabContent .tab-pane:nth-child(1)').addClass('show');
