Discover Top Posts Tagged with #bootstrap accordion

Bootstrap Accordion

Testing - ein Review von Andreas Korn (10.9.18)

Abb.: Standard-Komponente ohne CSS

Abb.: das Accordion ist in DW Bootstrap eine Standard-Form (die Farben sind aber ein dristes Grau, hier habe ich in meinem Beispiel 2 Farben ausgetauscht und die Schrift der Headlines fetter gestaltet (Schriftfarbe von Schwarz auf Weiss gesetzt; die Interaktion läuft hier standardgemäß über die Headlines, die einen “cursor: pointer” erhalten und die Interaktivität über eine Underline-Font anzeig; ich habe noch nicht herausgefunden, wie man nicht die Headline, sondern das ganze Tab-Feld als Trigger definieren kann; mit den a-Tag kann ich das Interaktionsfeld nicht in die Breite skalieren ... )

Viele Wege führen zum Ziel, viele Lösungen sind aber nicht funktionsfähig. Warum?

Beispiel ein “Accordion” (mit aufklappbarem Text/Grafik) soll in ein Responsive Webdesign integriert werden. Dazu gibt es viele Hinweise und Templates die aber auf den ersten Blick schön aussehen, aber nicht genau die von mir erwartete Grundfunktion liefern: beim Seitenaufruf zunächst ein geschlossenes Accordion. Meist ist der erste Tab geöffnet. Mal wird dies mit vielen CSS Zeilen, mal mit Java Script bzw. jQuery gelöst.

Abb.: DW DOM Baum; wenn das oberste Element im Browser immer bereits geöffnet ist, kann man die verhindern indem man z.B. im DOM-Baum folgende letzte Ziffern löscht .in und mit Enter bestätigen; da bin ich lange nicht drauf gekommen vgl. die Anm. hier)

DREAMWEAVER hat im Baukasten “Einfügen/jQuery UI/Accordion” eine entsprechende Komponente. Verwende ich das Bootstrap Framework, bleibt die Interaktivität im Browser gestoppt; zudem ist das Accordion ausgeklappt. Dabei lädt DW einen jQUery Asset Ordner mit den JS, CSS und image-Daten.

Füge ich das gleiche in eine konventionelle HTML Umgebung, scheint das Accordion zu funktionieren. Ich möchte aber das Responsive Grid verwenden. Lösung: DW hat unter “Einfügen/Bootstrap-Komponenten” fast ganz unten das “Accordion”. Dies ist nun endlich funktionsfähig und benötig kein jQuery und JS Script. Was dann etwas mühsam erscheint ist die Anpassung des grauen Looks. Dazu müssen aus dem BS einige Selektoren in eine CSS geschrieben werden. In meinem Fall habe ich so zuerst den .panel-body (gelb) verändert, bei .panel-heading hatten Anpassungen keine Wirkung.

Erst im Browser mit Hilfe der der “untersuchen” Funktion habe ich diesen Selektor identifiziert: .panel-default > .panel-heading. So konnte ich die blaue Hintergrundfarbe vergeben.

Warum Dreamweaver auch in seiner Hilfe hier keine vernünftigen Infos anbietet, ist mir ein Rätsel. Ich habe leider viel Zeit verschwendet, um die Grundlagen des Accordions für meine Belange zu konsolidieren. Wenn man die Schritte kennt, hat man in ca. 10 min. alles fertig...

XXXXXXXXXXXXX

Tipp: DW Codefragmente

Gebraucht man Webdesign Bereiche mehrfach oder teilt die Arbeit im Team, kann man in DW Codefragmente erzeugen (auch im Beschreibungsfeld Anmerkungen eintippen). Hier habe ich z.B. Fragmente für den Accordion HTML Code und den CSS Code gespeichert; den kann ich dann in einer neuen Datei an die entsprechende Einfügestelle (Cursormarkierung im HTML-Code) einbringen.

xxxxxxxxxxxxxxxxxx

Wer es testen möchte, hier sind die CSS und HTML Codes

CSS

/* ACCORDION -------- START -------eingefügt als BS Komponente nicht als JQuery UI ! -------------*/ } .panel-default {

} .panel-default > .panel-heading { color: #FFFFFF; background-color: #475A9C; }

.panel-title { font-weight: bold; }

.panel-body { background-color: #FEB017; } /* ACCORDION -------- ENDE -------eingefügt als BS Komponente nicht als JQuery UI ! -------------*/

xxxxxxxxxxxxxx

HTML

<section class="accordion"> <div class="panel-group" id="accordion1" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab"> <h4 class="panel-title"><a href="#collapseOne1" class="a" data-toggle="collapse" data-parent="#accordion1">GRAFIK-SOFTWARE</a></h4> </div> <div class="panel-collapse collapse" id="collapseOne1"> <div class="panel-body">PSD, AI, Pr, Ae, Au, Corel Painter, Clip Studio Paint, Krita ...</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo1">WEB-SOFTWARE</a></h4> </div> <div id="collapseTwo1" class="panel-collapse collapse"> <div class="panel-body">Bootstrap Studio, DW, Notepad ++, Axure, Balsamiq...</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseThree1">3D-SOFTWARE</a></h4> </div> </div> </section>

xxxxxxxxxxxxx

Accordion - Links

Bootstrap 4 Accordian https://bootsnipp.com/snippets/jvQ8X

Pure CSS Accordion https://codepen.io/oknoblich/pen/tKfab

Pure CSS Accordion (Pictures) https://codepen.io/emoreno911/pen/dOveoY

Hover activated accordian with default state https://codepen.io/uniqname/pen/gKmpz

How TO - Collapsibles/Accordion https://www.w3schools.com/howto/howto_js_accordion.asp

Simple jQuery Accordian https://codepen.io/css-tricks/full/LufJE

Collapse (Accordion) Generator

http://bootstrapbuild.com/accordion.php

#bootstrap accordion #weddesign #accordion

Tabcordion.js – Transforms Bootstrap tabs into Accordion Tabcordion.js is a simple jQuery plugin that transforms a set of Bootstrap tabs into a Bootstrap accordion.

#accordion #bootstrap #bootstrap accordion #bootstrap tabs #tabs