Moin an alle, ist es eigentlich möglich die Accordions standardmäßig geschlossen anzuzeigen? Der erste Tab ist immer von vornherein geöffnet. Das schaut nicht so schön aus. Ich hätte es gerne so, dass alle geschlossen sind und erst per klick sich öffnen. Ich hab ein CloudShop Viele Grüße Tamay
das wird sich im Cloudshop nicht so einfach machen lassen. Du könntest per CSS das erste Accordion-Panel ausblenden. Dann beginnt es mit dem 2. und ist somit geschlossen wenn man die Seite öffnet. Der Nachteil ist, dass in der aktuellen Cloudversion das Accordion noch auf 4 begrenzt ist. Dies Begrenzung soll aber mit dem kommenden Update wegfallen. Aber man kann ja auch einfach mehrere Accordions untereinander setzen. Code: .panel-group.accordion-widget > .panel-default:first-of-type { display: none; } Nachtrag: wenn du mehrere Accordions untereinander setzen willst, dann gibt es ein kleinen Abstand dazwischen. Diesen machst du mit diesem CSS Code weg: Code: .panel-group { margin-bottom: 0px; }
Hallo Michaela, danke erstmal für deine Hilfe. Wenn ich den CSS Code verwende, dann wird das erste Accordion-Panel gar nicht angezeigt. Müsste ich dann meine Texte ab dem 2. Panel einfügen und den ersten dann frei lassen?
Genau. Der Erste wird ausgeblendet, denn dieser ist ja offen, wenn man die Seite öffnet. In diesen schreibst du nur einen Punkt. Ganz egal. Denn er wird ja ausgeblendet. Und deine Texte schreibst du ab dem 2. Panel.
Hallo Ihr Lieben – ich klinke mich mal in diese nicht mehr ganz frische Diskussion ein, denn das standardmäßig aufgeklappte erste Accordion Panel stört mich auch, ich hätte es ebenfalls gerne beim Öffnen der Seite zunächst geschlossen. Gibt es da inzwischen eine "elegantere" Lösung, oder ist es weiterhin so, dass einem nur bleibt, das erste Panel komplett auszublenden? Danke im Voraus
Hallo Ihr Lieben Ich würde das Thema gerne aus gegebenem Anlass nochmal aufmachen. Im Gegensatz zu vielen anderen von Euch möchte ich gerne im Accordion den erst TAB immer geöffnet haben. Tatsächlich würde ich die Variante HTML meines Vorschreibers favorisieren, stoße hier allerdings an meine HTML-Grenzen. Kann mich jemand einen Tipp geben welche Zeilen ich im angefügten Quellcode mit welchem Parameter ergänzen soll? Vielen Dank für Euren Support <div id="tabs51fmzzhg4" class="tabs-widget "> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class=""> <a href="#tabs51fmzzhg4-title-1" aria-controls="tabs51fmzzhg4-title-1" role="tab" data-toggle="tab">Unsere Geschichte</a> </li> <li role="presentation" class=""> <a href="#tabs51fmzzhg4-title-2" aria-controls="tabs51fmzzhg4-title-2" role="tab" data-toggle="tab">Was wir bieten</a> </li> <li role="presentation" class=""> <a href="#tabs51fmzzhg4-title-3" aria-controls="tabs51fmzzhg4-title-3" role="tab" data-toggle="tab">Unsere Vision</a> </li> <li role="presentation" class=""> <a href="#tabs51fmzzhg4-title-4" aria-controls="tabs51fmzzhg4-title-4" role="tab" data-toggle="tab">Strategische Partner</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane " id="tabs51fmzzhg4-title-1"> <h3 class="visible-xs">Unsere Geschichte</h3> <p>Demotext</p> </div> <div role="tabpanel" class="tab-pane " id="tabs51fmzzhg4-title-2"> <h3 class="visible-xs">Was wir bieten</h3> <p style="margin-left:0px;">Demotext</p> </div> <div role="tabpanel" class="tab-pane " id="tabs51fmzzhg4-title-3"> <h3 class="visible-xs">Unsere Vision</h3> <p style="margin-left:0px;">Demotext</p> </div> <div role="tabpanel" class="tab-pane " id="tabs51fmzzhg4-title-4"> <h3 class="visible-xs">Strategische Partner</h3> <p style="margin-left:0px;">Demotext</p> </div> </div> </div>
Versuche mal den Stern des ersten Eintrags erneut zu klicken und danach speichern. Dies auch, wenn der Stern bereits farblich akitiert scheint. Danach sollte der erste Eintrag offen sein.
Dein Code ist von den Tabs, nicht vom Accordion ;-) Versuche es mit einem "active" in den Klassen des ersten Tabs: <div id="tabs51fmzzhg4" class="tabs-widget "> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"> <a href="#tabs51fmzzhg4-title-1" aria-controls="tabs51fmzzhg4-title-1" role="tab" data-toggle="tab">Unsere Geschichte</a> </li> <li role="presentation" class=""> <a href="#tabs51fmzzhg4-title-2" aria-controls="tabs51fmzzhg4-title-2" role="tab" data-toggle="tab">Was wir bieten</a> </li> <li role="presentation" class=""> <a href="#tabs51fmzzhg4-title-3" aria-controls="tabs51fmzzhg4-title-3" role="tab" data-toggle="tab">Unsere Vision</a> </li> <li role="presentation" class=""> <a href="#tabs51fmzzhg4-title-4" aria-controls="tabs51fmzzhg4-title-4" role="tab" data-toggle="tab">Strategische Partner</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="tabs51fmzzhg4-title-1"> <h3 class="visible-xs">Unsere Geschichte</h3> <p>Demotext</p> </div> <div role="tabpanel" class="tab-pane " id="tabs51fmzzhg4-title-2"> <h3 class="visible-xs">Was wir bieten</h3> <p style="margin-left:0px;">Demotext</p> </div> <div role="tabpanel" class="tab-pane " id="tabs51fmzzhg4-title-3"> <h3 class="visible-xs">Unsere Vision</h3> <p style="margin-left:0px;">Demotext</p> </div> <div role="tabpanel" class="tab-pane " id="tabs51fmzzhg4-title-4"> <h3 class="visible-xs">Strategische Partner</h3> <p style="margin-left:0px;">Demotext</p> </div> </div> </div>
Ich merke gerade, dass es bei den Tabs (und auch beim Accordion) -Widget so geht: Wenn du die Tabs angelegt hast, dann markiere den Stern des ersten Tabs. Der Stern ist zwar schon ausgefüllt, aber man muss ihn anklicken, nur dann ist der erste Tab offen. (Version 5.0)