Kleine Falten Dreiecke: Wie kann ich reduzierbare Abschnitte auf einer Webseite?

Question

Einige Webseiten haben ein „Drehen“ Dreieck Steuerung, die Untermenüs zusammenbrechen kann. Ich möchte die gleiche Art von Verhalten, sondern auch für Abschnitte in einer Form.

Sagen, dass ich eine Form hatte, die hatte Kreditgeber, Name, Anschrift und Stadteingänge. Einige meiner Web-User werden einen zweiten Satz dieser Felder müssen. Ich mag die zusätzlichen Felder für die Mehrheit der Benutzer verbergen. Diejenigen, die die zusätzlichen Felder benötigen, sollten sie mit einem Klick zugreifen können. Wie würde ich das tun?

Answer 1

Ach, ich glaube, Sie meinen Sie reduzierbare Abschnitte auf dem Formular haben wollen.

Kurz gesagt:

1. Legen Sie die Inhalte, die Sie in ihrem eigenen DIV, mit der CSS-Eigenschaft kollabieren wollen „display: none“ auf den ersten
2. Wickeln Sie einen Link (A-Tag) um das Dreieck Bild (oder Text wie "Hide / Show"), die die JavaScript läuft, um die Anzeige Eigenschaft zu wechseln.
3. Wenn Sie das Dreieck wollen „drehen“, wenn der Abschnitt erweitert / gezeigt, können Sie den JavaScript-Swap aus dem Bild zur gleichen Zeit haben.

Hier ist eine bessere Erklärung: Wie ein zusammenklappbarer DIV mit Javascript erstellen und CSS [ aktualisieren 2013.01.27 ist der Artikel nicht mehr verfügbar im Internet, können Sie sich auf < a href = „https://github.com/toddfoster/lectionary/blob/master/lectionary.html“ rel = „nofollow noreferrer“> die Quelle dieser HTML-Seite für ein Anwendungsbeispiel von diesem Artikel inspiriert]

Oder wenn Sie Google mit Worten wie „CSS kollabiert Abschnitte“, oder so werden Sie viele andere Tutorials, einschließlich Super-fancy diejenigen (zB http://xtractpro.com/articles/Animated-Collapsible-Panel.aspx ).

Answer 2

Ihre absolute einfachste Art und Weise des Versteckens / ein Element zeigt mit Hilfe von JavaScript ist durch die Sichtbarkeit Eigenschaft eines Elements festlegen.

Bei Ihrem Beispiel vorstellen, dass Sie hatte das folgende Formular auf Ihrer Seite definiert:

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

Es gibt zwei Dinge zu beachten hier:

1. Die zweite Gruppe von Eingabefeldern werden mit einem kleinen Inline-CSS zunächst versteckt.
2. Der „Lender“ Link, um eine JavaScript-Methode ruft die für Sie die ganze Arbeit tun. Wenn Sie auf diesen Link klicken, wird es dynamisch die Sichtbarkeit Stil dieses Elements gesetzt so dass es auf dem Bildschirm zu zeigen.

showElement() nimmt ein -Element-ID als Parameter und sieht wie folgt aus:

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

    oElem.style.visibility = "visible";

    return false;
}

Fast jeder JavaScript-Ansatz wird dies unter der Haube zu tun, aber ich würde empfehlen, einen Rahmen verwenden, die die Details der Implementierung von Ihnen weg versteckt. Schauen Sie sich auf JQuery und JQuery UI um einen viel poliert Übergang zu erhalten, wenn versteckt / Ihre Elemente zeigen.

Answer 3

Hier ist eine einfache CSS einzige Lösung, die eine Checkbox verwendet:

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