neilgee
2/12/2017 - 5:24 AM

Using Responsive Tabs and ACF repeater fields

Using Responsive Tabs and ACF repeater fields

<?php


add_action( 'genesis_entry_content', 'themeprefix_color_content' );
// ACF Values
// themeprefix_colors Main Repeater Field
// themeprefix_color sub-field - list of color values in a single radio button field

// Other Sub fields
// themeprefix_session
// themeprefix_price
// themeprefix_details
// themeprefix_link
// themeprefix_link_text

function themeprefix_color_content() {
// Set an array that matches the themeprefix_color sub field in ACF that has a radio button single selection from multiple choices
$colors = array( 'red', 'green', 'blue' );

	// Set up master tab headers, using the array for the labels and a counter increment for each anchor link in the li tag
	// Loop through the foreach loop values which correspond to the repeater sub field
	echo    '<div id="tabs1">
                        <ul>';

        foreach ($colors as $color) {
	        global $b;
	        $b++;
			 echo     "<li><a href='#tab-{$b}'>" . ucfirst($color) . "</a></li>";
        }
        echo            '</ul>';

	// Set up the tab content again matching the foreach array values and again with a counter increment
	// Loop through the foreach loop values which correspond to the repeater sub field
	foreach ($colors as $color) {
		global $i;
		$i++;
				// loop through the repeater rows of data
			        echo  "<div id='tab-{$i}'>
			        	   <ul class='colors'>";
			    while ( have_rows('themeprefix_colors') ) : the_row();
			    
			        if(get_sub_field('themeprefix_color') == "{$color}"):
			        // display the repeater sub field values
					echo    '<li>
		        				<h3>' . get_sub_field('themeprefix_session') . '</h3>
		        				<p class="price"><sup>$</sup>' . get_sub_field('themeprefix_price') . '</p>
		        				<p class="details">' . get_sub_field('themeprefix_details') . '</p>
		        				<a class="button" href="' . get_sub_field('themeprefix_link') . '"><p>' . get_sub_field('themeprefix_link_text') . '</p></a>

		        			</li>';
			        endif;

			    endwhile;
			        echo    '</ul>';
				echo '</div>';
	}
	echo '</div>';
}


genesis();