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.
There is no builtin within Foundation that does exactly what you're looking for here - your jQuery solution seems reasonable, though I'd trigger it based on a change rather than a click to handle other ways of triggering besides click (ie if someone selects using keyboard navigation).
There is a toggle-focus mechanism within Foundation for toggling when e.g. an input is focused, but no toggle-selected. This seems like a pretty reasonable request, if you want to file an issue around it on the Foundation github repo I suspect someone would build it. Or if you were excited to build it yourself, you could submit a pull request with the implementation and we'd work with you to get it in. If you want to go down this road, take a look at how the toggle-focus works here: https://github.com/zurb/foundation-sites/blob/develop/js/foundation.util.triggers.js#L94