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.