ben-g
7/9/2017 - 4:30 PM

Acf radio button toggle

ACF sub-fields within a repeater field.

When setting up the radio in ACF, choose the radio option from "field type" and, in this instance, I had to include 

wrap : Wrap
flex : Flex

in the "Choices" field.  This just sets up the labels for the radio for the user to select from.

The toggle works like this.

The first option is defined as 'wrap' under careers_layout.  So, looking in the radio.php file, you can see that the conditional indicates
if the user selects 'wrap', then wrap the content with a class of .wrap.  If the user selects the second option, it defaults to the "else"
parto of the statement.
//This example can be seen on Point Park's online program pages.

//Here, we call out to a separate file containing the section logic, 
// if it's a section that we are using.

<div id="career-outcomes" class="section career">
	<div class="wrap">

		<?php get_template_part('partials/careers'); ?>

	</div>
</div>'
//Previously, we set up a repeater field called 'Careers' containing two subfields:  // career_name and career_text.

<h2>Career Outcomes</h2>
<p><?php the_field('outcomes_text'); ?></p>

<?php
	// check if the repeater field has rows of data
	if( have_rows('careers') ): ?>

		<ul class="career__list"> <?php

		 	// loop through the rows of data
		    while ( have_rows('careers') ) : the_row(); ?>

				<li><?php the_sub_field('career_name'); ?></li>
				<?php the_sub_field('career_text'); ?><?php

		    endwhile; ?>
		</ul> <?php
	else :

	    // no rows found

	endif;
?>
<!-- This checks to see which option is selected on the radio, and, based upon that, returns either a "wrap" or "flex" class.  This is in the page's main template where the 
content needs to appear.-->

<!-- Radio button for swapping classes on section container. -->
	<?php if( get_field('careers_layout') == 'wrap' ) : ?>
	  <div class="wrap">
	<?php else : ?>
	  	<div class="flex-container">
	<?php endif; ?><!-- End Radio -->

		<?php get_template_part('partials/careers'); ?>