Kleine zusammenklappbare Dreiecke: Wie kann ich zusammenklappbare Abschnitte auf einer Webseite erstellen?

Question

Einige Webseiten haben ein "drehendes" Dreiecks-Steuerelement, das Untermenüs ausblenden kann. Ich möchte die gleiche Art von Verhalten, aber für Abschnitte in einer Form.

Angenommen, ich hätte ein Formular mit Angaben zu Kreditor, Name, Adresse und Stadt. Einige Benutzer meiner Website benötigen eine zweite Gruppe dieser Felder. Ich möchte die zusätzlichen Felder für die Mehrheit der Benutzer verbergen. Diejenigen, die die zusätzlichen Felder benötigen, sollten mit einem Klick darauf zugreifen können. Wie würde ich das tun?

Answer 1

Ah, ich denke du meinst, du möchtest zusammenklappbare Abschnitte auf deinem Formular haben.

Kurz:

1. Setzen Sie den Inhalt, den Sie in ihrer eigenen DIV, mit der CSS-Eigenschaft kollabieren wollen "display: none" auf dem ersten
2. Wrap einen Link (A-Tag) um das Dreieck image (oder Text wie "Hide/Show"), der das JavaScript ausführt, um die Anzeigeeigenschaft umzuschalten.
3. Wenn das Dreieck "gedreht" werden soll, wenn der Abschnitt erweitert/angezeigt wird, können Sie das Bild durch das JavaScript zur gleichen Zeit austauschen lassen.

Hier ist eine bessere Erklärung: How to Create a Collapsible DIV with Javascript and CSS [-Update 2013.01.27 der Artikel nicht mehr verfügbar im Internet, können Sie auf the source of this HTML page für ein Anwendungsbeispiel verweisen in diesem Artikel inspiriert]

Or Wenn Sie Google mit Wörtern wie "CSS collasting sections" durchsuchen, werden Sie viele andere Tutorials finden, einschließlich super-phantasievoller (zB http://xtractpro.com/articles/Animated-Collapsible-Panel.aspx).

Answer 2

Ihre einfachste Art, ein Element mithilfe von JavaScript ein-/auszublenden, besteht darin, die Sichtbarkeitseigenschaft eines Elements festzulegen.

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

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

1. Die zweite Gruppe von Eingabefelder werden mit einem zunächst versteckt wenig Inline-CSS.
2. Der Link "Add Lender" ruft eine JavaScript-Methode auf, die Ihnen die ganze Arbeit abnimmt. Wenn Sie auf diesen Link klicken, wird der Sichtbarkeitsstil des Elements dynamisch festgelegt, sodass es auf dem Bildschirm angezeigt wird.

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, verbirgt die Implementierungsdetails von Ihnen. Werfen Sie einen Blick auf JQuery und JQuery UI, um einen viel eleganteren Übergang zu bekommen, wenn Sie Ihre Elemente verstecken/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..