Peu de pliage triangles:comment puis-je créer pliable articles sur une page web?

Question

Certaines pages web disposent un "tournant" triangle de contrôle qui peut s'effondrer sous-menus.Je veux le même genre de comportement, mais pour les sections dans un formulaire.

Dire que j'avais une forme qui avait prêteur, le nom, l'adresse et la ville entrées.Certains de mes utilisateurs du site vont avoir besoin d'un deuxième ensemble de ces champs.Je tiens à dissimuler les champs supplémentaires pour la majorité des utilisateurs.Ceux qui ont besoin de champs supplémentaires devraient être en mesure d'y accéder en un seul clic.Comment dois-je procéder?

Answer 1

Ah, je pense que vous voulez dire que vous voulez avoir pliable articles sur votre formulaire.

En bref:

1. Mettre le contenu que vous voulez à s'effondrer dans son propre DIV avec la propriété CSS de "display:none" au premier
2. Envelopper un lien (Une balise) autour du triangle de l'image (ou le texte comme "Montrer/Cacher") qui exécute le JavaScript pour activer / désactiver l'affichage de la propriété.
3. Si vous souhaitez que le triangle de "tourner" lorsque la section est élargi indiqué, vous pouvez avoir le JavaScript permuter l'image en même temps.

Voici une meilleure explication: Comment Créer un Réductible DIV avec du Javascript et du CSS [Mise à jour 2013-01-27 l'article n'est plus disponible sur le Web, vous pouvez vous référer à la source de cette page HTML pour un appliqué exemple inspiré par cet article]

Ou si vous à la recherche Google avec des mots comme "CSS effondrement des sections" ou vous trouverez de nombreux autres tutoriels, y compris les super-fantaisie (p. ex. http://xtractpro.com/articles/Animated-Collapsible-Panel.aspx).

Answer 2

Votre absolue façon la plus simple de masquer / afficher un élément en utilisant JavaScript est en définissant la propriété de visibilité d'un élément.

Étant donné votre exemple imaginez-vous eu la forme suivante définie sur votre page:

<form id="form1">
    <fieldset id="lenderInfo">
        <legend>Primary Lender</legend>
        <label for="lenderName">Name</label>
        <input id="lenderName" type="text" />
        <br />
        <label for="lenderAddress">Address</label>
        <input id="lenderAddress" type="text" />
    </fieldset>
    <a href="#" onclick="showElement('secondaryLenderInfo');">Add Lender</a>
    <fieldset id="secondaryLenderInfo" style="visibility:hidden;">
        <legend>Secondary Lender</legend>
        <label for="secondaryLenderName">Name</label>
        <input id="secondaryLenderName" type="text" />
        <br />
        <label for="secondaryLenderAddress">Address</label>
        <input id="secondaryLenderAddress" type="text" />
    </fieldset>
</form>

Il y a deux choses à noter ici:

1. Le second groupe de champs d'entrée sont d'abord caché à l'aide un peu css en ligne.
2. Le lien « Ajouter prêteur » appelle une méthode JavaScript qui fera tout le travail pour vous. Lorsque vous cliquez sur ce lien, il définir dynamiquement le style de visibilité de cet élément amenant à apparaître sur l'écran.

showElement() prend un id élément comme paramètre et ressemble à ceci:

function showElement(strElem) {
    var oElem = document.getElementById(strElem);

    oElem.style.visibility = "visible";

    return false;
}

Presque chaque approche JavaScript va faire cela sous le capot, mais je vous recommande d'utiliser un cadre qui cache les détails de mise en œuvre loin de vous. Jetez un oeil à JQuery et JQuery UI afin d'obtenir une transition beaucoup plus poli quand cacher / montrer vos éléments.

Answer 3

Voici une seule solution simple, css qui utilise une case à cocher:

.hideNext:not(:checked)+div {
  max-height: 0;
  overflow: hidden;
}

<label for="ch1">More Options</label><input id="ch1" type="checkbox" class="hideNext" />
<div>Whatever you want to hide.</div>
and then more stuff below..