triangoli piccoli pieghevoli: come posso creare sezioni comprimibili in una pagina web?

Question

Alcune pagine web hanno una "svolta" di controllo triangolo che può crollare sottomenu. Voglio che lo stesso tipo di comportamento, ma per le sezioni in forma.

dire che ho avuto una forma che aveva mutuante, nome, indirizzo e città ingressi. Alcuni degli utenti del mio sito avranno bisogno di una seconda serie di questi campi. Vorrei nascondere i campi aggiuntivi per la maggior parte degli utenti. Quelli che hanno bisogno i campi aggiuntivi dovrebbero essere in grado di accedervi con un solo clic. Come potrei farlo?

Answer 1

Ah, penso che significa che si desidera avere sezioni comprimibili sul modulo.

In breve:

1. Mettere il contenuto che si desidera comprimere nella propria DIV, con la proprietà CSS di "display: none" in un primo momento
2. Avvolgere un collegamento (un tag) l'immagine triangolo intorno (o testo come "Hide / Show"), che viene eseguito il codice JavaScript per attivare o disattivare la proprietà di visualizzazione.
3. Se si desidera che il triangolo a "girare" quando la sezione è espansa / mostrato, si può avere lo swap JavaScript l'immagine allo stesso tempo.

Ecco una spiegazione migliore: Come creare un DIV pieghevole con JavaScript e CSS [ Aggiorna il 2013/01/27 l'articolo non è più disponibile sul Web, è possibile fare riferimento a < a href = "https://github.com/toddfoster/lectionary/blob/master/lectionary.html" rel = "nofollow noreferrer"> la sorgente di questa pagina HTML per un esempio applicata ispirata a questo articolo]

O se Google ricerca con parole come "sezioni CSS collasso" o come si trovano molti altri tutorial, tra cui quelli di super-fantasia (ad esempio http://xtractpro.com/articles/Animated-Collapsible-Panel.aspx ).

Answer 2

Il modo più semplice assoluto di nascondere / mostrare un elemento utilizzando JavaScript è impostando la proprietà di visibilità di un elemento.

Dato il tuo esempio Immagina di avere la seguente forma definita sulla tua pagina:

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

Ci sono due cose da notare qui:

1. Il secondo gruppo di campi di input sono inizialmente nascosto utilizzando un po 'di CSS in linea.
2. Il link "Aggiungi Lender" sta chiamando un metodo JavaScript che farà tutto il lavoro per voi. Quando si fa clic quel link sarà impostato in modo dinamico lo stile visibilità di quel elemento che causa per mostrare sullo schermo.

showElement() prende un elemento id come parametro e si presenta così:

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

    oElem.style.visibility = "visible";

    return false;
}

Quasi ogni approccio JavaScript sta per essere fare questo sotto il cofano, ma mi consiglia di utilizzare un quadro che nasconde i dettagli di implementazione lontano da voi. Date un'occhiata a JQuery , e JQuery UI al fine di ottenere una transizione molto più lucido quando nascondere / mostrare gli elementi.

Answer 3

Ecco un semplice css unica soluzione che utilizza una casella di controllo:

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