Akkordeon, FAQ, Spoiler und andere Dropdown-Widgets

Sie können ein Akkordeon, eine FAQ, einen Spoiler und dergleichen mit Div und JavaScript erstellen.
Aber besser: Details und Zusammenfassung

Es wird von allen modernen Browsern unterstützt und dies ist ein semantisch korrekt formatierter Code, dessen Verwendung Vorteile hat:

1. Menschen mit Behinderungen können Ihre Website einfacher nutzen! Ihre Software (Bildschirmleseprogramme und dergleichen) versteht HTML5-Tags perfekt und verarbeitet sie korrekt und informiert die Benutzer korrekt über den Inhalt.
2. Die Kohärenz des Textes wird verbessert, und Suchmaschinen können die Site besser indizieren, da sie besser verstehen, wie sichtbarer und versteckter Text zusammenhängen.
3. Es wird verfügbar sein, um Elemente über die Tastatur und andere Geräte zu steuern.
4. Die Menge des zu ladenden Javascript-Codes wird reduziert, was die Seitenladegeschwindigkeit, die Verarbeitungsgeschwindigkeit und die Korrektheit erhöht.
5. Verbesserung der Leistung in Lighthouse, Google PageSpeed und anderen ähnlichen Tools.
6. Es funktioniert, wenn Javascript deaktiviert ist.

Minus:

1. Ältere Browser kennen solche Tags nicht und verbergen keine Informationen.

HTML:

<details> <summary>- </summary> <p>  —   </p> </details> <details open> <summary>-  2</summary> <p>        </p> </details> <details> <summary>-  3</summary> <p>  —   </p> </details> 

Demonstration:


Einerseits sieht es nicht sehr schön aus, andererseits ist es neutral und passt problemlos in viele Designs. Übrigens ist die Standardansicht des Details-Tags dem Spoiler aus dem Habr sehr ähnlich, nur müssen Sie es ein wenig neu streichen, unterstreichen und den semantisch korrekten Habrovsk-Spoiler ohne Javascript und Divs erhalten.



Leider hat der Standardmarker zwei Nachteile:

1. Alte Browser sehen es nicht.
2. In Webkit-Browsern kann das Markierungssymbol nicht geändert werden.

Aus diesem Grund muss die Standardmarkierung ausgeblendet und eine eigene erstellt werden.


Betrachten Sie das erste Beispiel für Details / Zusammenfassung mit einer geänderten Textmarkierung:



CSS:

 summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:inline-block; padding: .3em .5em .3em .4em; font-size:1.4em; cursor: pointer; } summary:before { content: "+"; margin-right: .3em; } details[open] > summary:before { content: "–"; } summary ~ * { padding:0 1em 0 1em; } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } details{ display:block; margin-bottom: .5rem; } 

Als Standardmarkierungen zeigen wir Folgendes an: keine und zeigen eine Alternative mit Zusammenfassung: vor {content: "+";}

Zusammenfassung: Fokus - Strich mit Kastenschatten, dies ist für die Tastatur erforderlich, damit das aktive Element sichtbar ist und Sie sich mit der Tabulatortaste bewegen und mit einem Leerzeichen öffnen und schließen können.

Für das Zusammenfassungs-Tag habe ich display: inline-block festgelegt - dies ist so, dass es nicht bis zur vollen Breite reicht und nur Wörter anklickbar sind und nicht die gesamte Zeile.

Demonstration:


Textmarkierung rechts + einfache Text- und Markierungsanimation:



CSS:

 summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:inline-block; padding: .3em .5em .3em .4em; font-size:1.4em; cursor: pointer; } summary:after { content: "+"; margin-left: .3em; display: inline-block; transition: transform .5s; } details[open] > summary:after { transform: scale(1,-1); } summary ~ * { padding:0 1em 0 1em; } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } details{ display:block; margin-bottom: .5rem; } 

Im neuen Beispiel verwende ich summary: after für den Marker anstelle von summary: before, sodass er rechts angezeigt wird.

Markeranimation mit Transformation: Skala (1, -1);

Für alle Elemente, die nach der Zusammenfassung angezeigt werden, habe ich die Animation mithilfe der Animation für ein reibungsloses Erscheinungsbild festgelegt: Sweep .5s Easy-In-Out;

Demonstration:


Svg Marker + Rotationsanimation:



CSS:

 summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:inline-block; padding: .3em .6em .3em 1.5em; font-size:1.4em; cursor: pointer; position: relative; } summary:before { left: .3em; top: .4em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; } details[open] > summary:before { transform: rotateZ(90deg); } summary ~ * { padding:0 1em 0 1em; } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } details{ display:block; margin-bottom: .5rem; } / svg + xml; base64, PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4 =") no-repeat summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:inline-block; padding: .3em .6em .3em 1.5em; font-size:1.4em; cursor: pointer; position: relative; } summary:before { left: .3em; top: .4em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; } details[open] > summary:before { transform: rotateZ(90deg); } summary ~ * { padding:0 1em 0 1em; } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } details{ display:block; margin-bottom: .5rem; } 

Zusammenfassung: musste vorher ernsthaft überarbeitet werden:

1. Put Position: absolut; links: .3em; oben: .4em; Breite: 1em; Höhe: 1em;
2. Die Textmarkierung muss auf Farbe gesetzt sein: transparent; Andernfalls wird es sichtbar.
3. Wir hängen das Bild im Hintergrund auf.

Es ist auch erforderlich, die Einrückung mit dem linken Auffüllpunkt bei der Zusammenfassung auf 1,5 zu setzen, damit sich Text und Symbol nicht überlappen.

Nun, wir fügen transform hinzu: rotateZ (90deg) für eine schöne Drehung des Pfeils.

Demonstration:


Wenn wir das SVG-Symbol rechts benötigen, müssen wir die Zusammenfassung ändern: vorher und rechts statt links setzen.

Für die Zusammenfassung setzen Sie die Polsterung rechts: 1.5em;



CSS:

 summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:inline-block; padding: .3em 1.5em .3em .6em; font-size:1.4em; cursor: pointer; position: relative; } summary:before { right: .3em; top: .4em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; } details[open] > summary:before { transform: rotateZ(90deg); } summary ~ * { padding:0 1em 0 1em; } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } details{ display:block; margin-bottom: .5rem; } / svg + xml; base64, PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4 =") no-repeat summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:inline-block; padding: .3em 1.5em .3em .6em; font-size:1.4em; cursor: pointer; position: relative; } summary:before { right: .3em; top: .4em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; } details[open] > summary:before { transform: rotateZ(90deg); } summary ~ * { padding:0 1em 0 1em; } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } details{ display:block; margin-bottom: .5rem; } 

Demonstration:


Lassen Sie uns nun eines der häufigsten Beispiele für die Erstellung eines Akkordeons machen, bei dem links ein Symbol, Hintergrund, Schatten und Effekte angezeigt werden:



CSS:

 body{background: #edf2f7;} details{ display:block; background: #fff; width:400px; box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border-radius: 8px; overflow:hidden; margin-bottom: 1.5rem; } summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:block; padding: .3em .3em .3em 1.4em; font-size:1.4em; cursor: pointer; position: relative; border-bottom: 1px solid #e2e8f0; } summary:before { top: .4em; left: .3em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; } details[open] > summary:before { transform: rotateZ(90deg); } summary ~ * { padding: 0 2em 10px 2em; } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } / svg + xml; base64, PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4 =") no-repeat body{background: #edf2f7;} details{ display:block; background: #fff; width:400px; box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border-radius: 8px; overflow:hidden; margin-bottom: 1.5rem; } summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:block; padding: .3em .3em .3em 1.4em; font-size:1.4em; cursor: pointer; position: relative; border-bottom: 1px solid #e2e8f0; } summary:before { top: .4em; left: .3em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIzNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; } details[open] > summary:before { transform: rotateZ(90deg); } summary ~ * { padding: 0 2em 10px 2em; } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } 

Demonstration:


Svg-Markierung rechts + Spiegelrotationspfeileffekt:



CSS:

 body{background: #edf2f7;} details{ display:block; background: #fff; width:400px; box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border-radius: 8px; overflow:hidden; margin-bottom: 1.5rem; } summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:block; padding: .3em 1em .3em .9em; border-bottom: 1px solid #e2e8f0; font-size:1.4em; cursor: pointer; position: relative; } summary:before { top: .4em; right: .3em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTYuNTkgOC41OUwxMiAxMy4xNyA3LjQxIDguNTkgNiAxMGw2IDYgNi02eiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; } details[open] > summary:before { transform: scale(1,-1); } summary ~ * { padding: 0 1em 10px 1.4em; } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } / svg + xml; base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTYuNTkgOC41OUwxMiAxMy4xNyA3LjQxIDguNTkgNiAxMGw2IDYgNi02eiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4 =") no-repeat body{background: #edf2f7;} details{ display:block; background: #fff; width:400px; box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); border-radius: 8px; overflow:hidden; margin-bottom: 1.5rem; } summary::-webkit-details-marker{display:none;} summary::-moz-list-bullet{list-style-type:none;} summary::marker{display:none;} summary { display:block; padding: .3em 1em .3em .9em; border-bottom: 1px solid #e2e8f0; font-size:1.4em; cursor: pointer; position: relative; } summary:before { top: .4em; right: .3em; color: transparent; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTYuNTkgOC41OUwxMiAxMy4xNyA3LjQxIDguNTkgNiAxMGw2IDYgNi02eiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=") no-repeat 50% 50% / 1em 1em; width: 1em; height: 1em; content: ""; position: absolute; transition: transform .5s; } details[open] > summary:before { transform: scale(1,-1); } summary ~ * { padding: 0 1em 10px 1.4em; } details[open] summary ~ *{ animation: sweep .5s ease-in-out; } @keyframes sweep { 0% {opacity: 0;} 100% {opacity: 1;} } summary:focus { outline:0; box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3); } 

Demonstration:


Jetzt können Sie schöne Akkordeons, Spoiler und FAQs ohne JavaScript in reinem HTML5 und CSS erstellen.

Überlegen Sie sich vor dem Entfernen des Umrisses etwa 100 Mal, wie Sie ihn ersetzen können, damit eine Person den Fokus sehen und sich von der Tastatur oder anderen Geräten bewegen kann.

Wenn Sie dies benötigen, müssen Sie beim Öffnen eines Spoilers und beim Schließen eines Spoilers Javascript verwenden. Im Folgenden gebe ich ein Beispiel für einfachen JS-Code, mit dem dieses Problem gelöst werden kann.

JavaScript:

 var details = document.querySelectorAll("details"); for(i=0;i<details.length;i++) { details[i].addEventListener("toggle", accordion); } function accordion(event) { if (!event.target.open) return; var details = event.target.parentNode.children; for(i=0;i<details.length;i++) { if (details[i].tagName != "DETAILS" || !details[i].hasAttribute('open') || event.target == details[i]) { continue; } details[i].removeAttribute("open"); } } 

Demonstration:


Details Support-Tabelle von Browsern.

Mit freundlichen Grüßen Ersteller des Landing Designers für Freiberufler CMS cPortfolio