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