Menu icon Foundation
Form Radio Toggle

I'm a bit new to Foundation, working on doing a responsive redesign for an existing application form. Several of the questions in this form are of the type where you answer a fairly general question, then depending on your selection, you might need to enter more information. Here's a very basic example:

<fieldset class="row columns">
    <legend>Do you like ice cream?</legend>
    <label><input type="radio" name="icecream" value="Yes">Yes</label>
    <label><input type="radio" name="icecream" value="No">No</label>
</fieldset>

<div id="flavor" class="row columns hide">
  <label>What flavor?
    <input type="text" name="flavor">
  </label>
</div>

What I need to do is only show the #flavor div if the user selects the Yes option, and hide it by default or if the user selects No. I can accomplish this easily with some added jQuery, but I feel like I'm missing a native way to handle this in Foundation. I've tried using Toggler, but it toggles the state instead of letting me specify the state of #flavor for each radio input. I've tried Reveal, but it seems designed only for modals.

I've searched the docs, but can't seem to find any other built-in methods for showing/hiding elements dynamically. Am I missing something?

I've set this up in CodePen if it helps. It has the jQuery method for making it function to demonstrate what I'm trying to get at.

foundation 6forms

I'm a bit new to Foundation, working on doing a responsive redesign for an existing application form. Several of the questions in this form are of the type where you answer a fairly general question, then depending on your selection, you might need to enter more information. Here's a very basic example:

<fieldset class="row columns">
    <legend>Do you like ice cream?</legend>
    <label><input type="radio" name="icecream" value="Yes">Yes</label>
    <label><input type="radio" name="icecream" value="No">No</label>
</fieldset>

<div id="flavor" class="row columns hide">
  <label>What flavor?
    <input type="text" name="flavor">
  </label>
</div>

What I need to do is only show the #flavor div if the user selects the Yes option, and hide it by default or if the user selects No. I can accomplish this easily with some added jQuery, but I feel like I'm missing a native way to handle this in Foundation. I've tried using Toggler, but it toggles the state instead of letting me specify the state of #flavor for each radio input. I've tried Reveal, but it seems designed only for modals.

I've searched the docs, but can't seem to find any other built-in methods for showing/hiding elements dynamically. Am I missing something?

I've set this up in CodePen if it helps. It has the jQuery method for making it function to demonstrate what I'm trying to get at.