Fondation - Affichage des éléments de formulaire conditionnel

Question

Je suis un peu nouveau à la Fondation, travaillant à faire une refonte responsive pour un formulaire de demande existant. Plusieurs des questions dans ce formulaire sont du type où vous répondez à une question assez générale, puis en fonction de votre sélection, vous devrez peut-être entrer plus d'informations. Voici un exemple très simple:

<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> 

Ce que je dois faire est de montrer que la #flavor div si l'utilisateur sélectionne l'option Oui, et le cacher par défaut ou si l'utilisateur sélectionne Non, je peux accomplir cela facilement avec un peu de jQuery ajouté, mais je me sens comme si je manquais une façon native de gérer cela dans la Fondation. J'ai essayé d'utiliser Toggler, mais il bascule l'état au lieu de me laisser spécifier l'état de #flavor pour chaque entrée radio. J'ai essayé Reveal, mais il semble conçu uniquement pour les modaux.

J'ai recherché les documents, mais je n'arrive pas à trouver d'autres méthodes intégrées pour afficher/masquer des éléments de façon dynamique. Est-ce que je manque quelque chose?

I've set this up in CodePen if it helps. Il a la méthode jQuery pour que cela fonctionne pour démontrer ce que je cherche à obtenir.

Answer 1

Il n'y a pas de version intégrée dans Foundation qui fait exactement ce que vous cherchez ici - votre solution jQuery semble raisonnable, bien que je la déclenche sur la base d'un change plutôt que d'un clic pour gérer d'autres méthodes de clic (c'est-à-dire si quelqu'un sélectionne en utilisant la navigation au clavier).

Il existe un mécanisme toggle-focus dans Foundation pour basculer lorsque, par ex. une entrée est focalisée, mais pas toggle-selected. Cela semble être une demande assez raisonnable, si vous voulez file an issue around it on the Foundation github repo je suppose que quelqu'un le construirait. Ou si vous étiez excité de le construire vous-même, vous pourriez soumettre une demande d'extraction avec l'implémentation et nous travaillerions avec vous pour l'intégrer. Si vous voulez suivre cette voie, regardez comment le toggle-focus fonctionne ici: https://github.com/zurb/foundation-sites/blob/develop/js/foundation.util.triggers.js#L94