Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bootstrap ACF While Tab Modals
<?php // <~ don't add me in - add the below code in functions.php
add_shortcode( 'wpb_while_tabs_accordion_acf', 'wpb_while_tabs_accordion_acf' );
/**
* Bootstrap While Tabs Loop
*/
function wpb_while_tabs_accordion_acf() {
ob_start();
// *Repeater
// tabs_repeater
// *Sub-Fields
// tab_header
// tab_content
?>
<style>
#accordion-tabs .nav-tabs {
display:none;
}
@media(min-width:992px) {
#accordion-tabs .nav-tabs {
display: flex;
}
#accordion-tabs .card {
border: none;
}
#accordion-tabs .card .card-header {
display:none;
}
#accordion-tabs .card .collapse{
display:block;
}
}
@media(max-width:991px){
/*
* Changed selector to `.tab-content > .tab-pane` to override `.fade:not(.show)`
* In BS4 Beta `.tab-pane`s were rendered hidden by just `.fade`
*/
#accordion-tabs .tab-content > .tab-pane {
display: block;
opacity: 1;
}
}
</style>
<?php
// check if the repeater field has rows of data
if( have_rows('tabs_repeater') ):
$i = 1; // Set the increment variable
echo '<div id="accordion-tabs" class="container">
<ul class="nav nav-tabs" id="tabs" role="tablist">';
// loop through the rows of data for the tab header
while ( have_rows('tabs_repeater') ) : the_row();
$header = get_sub_field('tab_header');
$content = get_sub_field('tab_content');
?>
<li class="nav-item">
<a class="nav-link <?php if($i == 1) echo 'active';?>" id="<?php echo sanitize_title($header); ?>-tab" data-toggle="tab" href="#<?php echo sanitize_title($header); ?>" role="tab" aria-controls="<?php echo sanitize_title($header); ?>" aria-selected="true"><?php echo $header; ?></a>
</li>
<?php $i++; // Increment the increment variable
endwhile; //End the loop
echo '</ul>
<div class="tab-content" id="content" role="tablist">';
$i = 1; // Set the increment variable
// loop through the rows of data for the tab content
while ( have_rows('tabs_repeater') ) : the_row();
$header = get_sub_field('tab_header');
$content = get_sub_field('tab_content');
?>
<div id="<?php echo sanitize_title($header); ?>" class="card tab-pane fade show <?php if($i == 1) echo 'active';?>" role="tabpanel" aria-labelledby="tab-<?php echo sanitize_title($header); ?>">
<div class="card-header" role="tab" id="heading-<?php echo sanitize_title($header); ?>">
<h5 class="mb-0">
<!-- Note: `data-parent` removed from here -->
<a data-toggle="collapse" href="#collapse-<?php echo sanitize_title($header); ?>" aria-expanded="false" aria-controls="collapse-<?php echo sanitize_title($header); ?>">
<?php echo $header; ?>
</a>
</h5>
</div>
<!-- Note: New place of `data-parent` -->
<div id="collapse-<?php echo sanitize_title($header); ?>" class="collapse <?php if($i == 1) echo 'show';?>" data-parent="#content" role="tabpanel" aria-labelledby="heading-<?php echo sanitize_title($header); ?>">
<div class="card-body">
<?php echo $content; ?>
</div>
</div>
</div>
<?php $i++; // Increment the increment variable
endwhile; //End the loop
echo '</div></div>';
else :
// no rows found
echo 'Come back tomorrow';
endif;
return ob_get_clean();
}
<?php
// *Repeater
// tabs_repeater
// *Sub-Fields
// tab_header
// tab_content
?>
<style>
#accordion-tabs .nav-tabs {
display:none;
}
@media(min-width:992px) {
#accordion-tabs .nav-tabs {
display: flex;
}
#accordion-tabs .card {
border: none;
}
#accordion-tabs .card .card-header {
display:none;
}
#accordion-tabs .card .collapse{
display:block;
}
}
@media(max-width:991px){
/*
* Changed selector to `.tab-content > .tab-pane` to override `.fade:not(.show)`
* In BS4 Beta `.tab-pane`s were rendered hidden by just `.fade`
*/
#accordion-tabs .tab-content > .tab-pane {
display: block;
opacity: 1;
}
}
</style>
<?php
// check if the repeater field has rows of data
if( have_rows('tabs_repeater') ):
$i = 1; // Set the increment variable
echo '<div id="accordion-tabs" class="container">
<ul class="nav nav-tabs" id="tabs" role="tablist">';
// loop through the rows of data for the tab header
while ( have_rows('tabs_repeater') ) : the_row();
$header = get_sub_field('tab_header');
$content = get_sub_field('tab_content');
?>
<li class="nav-item">
<a class="nav-link <?php if($i == 1) echo 'active';?>" id="<?php echo sanitize_title($header); ?>-tab" data-toggle="tab" href="#<?php echo sanitize_title($header); ?>" role="tab" aria-controls="<?php echo sanitize_title($header); ?>" aria-selected="true"><?php echo $header; ?></a>
</li>
<?php $i++; // Increment the increment variable
endwhile; //End the loop
echo '</ul>
<div class="tab-content" id="content" role="tablist">';
$i = 1; // Set the increment variable
// loop through the rows of data for the tab content
while ( have_rows('tabs_repeater') ) : the_row();
$header = get_sub_field('tab_header');
$content = get_sub_field('tab_content');
?>
<div id="<?php echo sanitize_title($header); ?>" class="card tab-pane fade show <?php if($i == 1) echo 'active';?>" role="tabpanel" aria-labelledby="tab-<?php echo sanitize_title($header); ?>">
<div class="card-header" role="tab" id="heading-<?php echo sanitize_title($header); ?>">
<h5 class="mb-0">
<!-- Note: `data-parent` removed from here -->
<a data-toggle="collapse" href="#collapse-<?php echo sanitize_title($header); ?>" aria-expanded="false" aria-controls="collapse-<?php echo sanitize_title($header); ?>">
<?php echo $header; ?>
</a>
</h5>
</div>
<!-- Note: New place of `data-parent` -->
<div id="collapse-<?php echo sanitize_title($header); ?>" class="collapse <?php if($i == 1) echo 'show';?>" data-parent="#content" role="tabpanel" aria-labelledby="heading-<?php echo sanitize_title($header); ?>">
<div class="card-body">
<?php echo $content; ?>
</div>
</div>
</div>
<?php $i++; // Increment the increment variable
endwhile; //End the loop
echo '</div></div>';
else :
// no rows found
echo 'Come back tomorrow';
endif;
return ob_get_clean();
}
<?php // <~ don't add me in - add the below code in functions.php
add_shortcode( 'wpb_while_tabs_acf', 'wpb_while_tabs_acf' );
/**
* Bootstrap While Tabs Loop
*/
function wpb_while_tabs_acf() {
ob_start();
// *Repeater
// tabs_repeater
// *Sub-Fields
// tab_header
// tab_content
// check if the repeater field has rows of data
if( have_rows('tabs_repeater') ):
$i = 1; // Set the increment variable
echo '<ul class="nav nav-tabs" id="myTab" role="tablist">';
// loop through the rows of data for the tab header
while ( have_rows('tabs_repeater') ) : the_row();
$header = get_sub_field('tab_header');
$content = get_sub_field('tab_content');
?>
<li class="nav-item">
<a class="nav-link <?php if($i == 1) echo 'active';?>" id="<?php echo sanitize_title($header); ?>-tab" data-toggle="tab" href="#<?php echo sanitize_title($header); ?>" role="tab" aria-controls="<?php echo sanitize_title($header); ?>" aria-selected="true"><?php echo $header; ?></a>
</li>
<?php $i++; // Increment the increment variable
endwhile; //End the loop
echo '</ul>
<div class="tab-content" id="myTabContent">';
$i = 1; // Set the increment variable
// loop through the rows of data for the tab content
while ( have_rows('tabs_repeater') ) : the_row();
$header = get_sub_field('tab_header');
$content = get_sub_field('tab_content');
?>
<div class="tab-pane fade show <?php if($i == 1) echo 'active';?>" id="<?php echo sanitize_title($header); ?>" role="tabpanel" aria-labelledby="<?php echo sanitize_title($header); ?>-tab"><?php echo $content; ?></div>
<?php $i++; // Increment the increment variable
endwhile; //End the loop
echo '</div>';
else :
// no rows found
endif;
return ob_get_clean();
}
<?php
// *Repeater
// tabs_repeater
// *Sub-Fields
// tab_header
// tab_content
// check if the repeater field has rows of data
if( have_rows('tabs_repeater') ):
$i = 1; // Set the increment variable
echo '<ul class="nav nav-tabs" id="myTab" role="tablist">';
// loop through the rows of data for the tab header
while ( have_rows('tabs_repeater') ) : the_row();
$header = get_sub_field('tab_header');
$content = get_sub_field('tab_content');
?>
<li class="nav-item">
<a class="nav-link <?php if($i == 1) echo 'active';?>" id="<?php echo sanitize_title($header); ?>-tab" data-toggle="tab" href="#<?php echo sanitize_title($header); ?>" role="tab" aria-controls="<?php echo sanitize_title($header); ?>" aria-selected="true"><?php echo $header; ?></a>
</li>
<?php $i++; // Increment the increment variable
endwhile; //End the loop
echo '</ul>
<div class="tab-content" id="myTabContent">';
$i = 1; // Set the increment variable
// loop through the rows of data for the tab content
while ( have_rows('tabs_repeater') ) : the_row();
$header = get_sub_field('tab_header');
$content = get_sub_field('tab_content');
?>
<div class="tab-pane fade show <?php if($i == 1) echo 'active';?>" id="<?php echo sanitize_title($header); ?>" role="tabpanel" aria-labelledby="<?php echo sanitize_title($header); ?>-tab"><?php echo $content; ?></div>
<?php $i++; // Increment the increment variable
endwhile; //End the loop
echo '</div>';
else :
// no rows found
endif;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.