Bootstrap ACF While Tab Modals

bootstrap-tab-accordion-loops-shortcode.php

<?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();
}

bootstrap-tab-accordion-loops.php

<?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();
}

bootstrap-tab-loops-shortcode.php

<?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();
}

bootstrap-tab-loops.php

<?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;