fhs-op2 und Accordions

[Traktorist]

Die Accordions sind eine tolle Art und Weise eine größere Menge Content unterzubringen und doch eine aufgeräumte Seite zu bieten. Aus diesem Grund habe ich damit etwas rungespielt und weitere Seiten angelegt.

Den Code habe ich dann wie folgt angepasst:

Code: Select all

    <p class="panel-title mceNonEditable"><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="mceEditable">Rotwein: „The Cloof Cellar Blend“ 1</a></p>
 </div>
 <div id="collapseOne" class="panel-collapse collapse mceNonEditable">

in

Code: Select all

    <p class="panel-title mceNonEditable"><a data-toggle="collapse" data-parent="#accordion" href="#collapseBsp-II" class="mceEditable">Rotwein: „The Cloof Cellar Blend“ 1</a></p>
</div>
<div id="collapseBsp-II" class="panel-collapse collapse mceNonEditable">

also

Code: Select all

collapseOne

in

Code: Select all

collapseBsp-II

geändert usw.

Grundsätzlich funktionieren die Accordions auch, doch schließen Sie sich nicht automatische bei einem Wechsel.
Als Beispiel habe ich mal die Site http://test.lebensklang.care angelegt. Dort ist es zu sehen unter Beispiele-II. In dem Beispiel habe ich außer der Anpassungen im Code oben keine Änderungen vorgenommen.
Das gleiche Verhalten kann man auch auf der Test-Site http://test1.scholle-privat.de von Frank (Der Zwerch) sehen. Er hat auch mehrere Seiten mit Accordions erstellt.
Evtl. muss noch einen weitere Anpassung gemacht werde, für die mir die Ahnung fehlt. Bin für Tipps dankbar.

Viele Grüße, Ele

[frase]

Bin mir nicht sicher und habe jetzt keine Zeit.
Das könnte am Bindestrich liegen:
collapseBsp-II

[Traktorist]

Nein, tut es leider nicht, habe es gerade ausprobiert.

[frase]

Es liegt wahrscheinlich auch daran, dass du nun 2 x div id="accordion" hast.

[frase]

http://stackoverflow.com/questions/2535 ... -at-a-time

oder

http://stackoverflow.com/questions/1569 ... -be-opened

Nicht selbst gelesen - keine Zeit.

[cmb]

Es liegt wahrscheinlich auch daran, dass du nun 2 x div id="accordion" hast.

Ja, und noch weitere doppelte IDs. Das ist grundsätzlich nicht zu empfehlen.

http://stackoverflow.com/questions/2535 ... -at-a-time

oder

http://stackoverflow.com/questions/1569 ... -be-opened

TL;DR: die data-parents sind anscheinend nicht nötig bzw. schaden wohl mehr als sie helfen.

[Holger]

Ich modernisiere gerade mein acDIVs-Plugin.
In dem Atemzug habe ich versucht auch eine simple Lösung für verschiedene Themes zu machen.
Franks Vorlage habe ich mal umgesetzt, passend zum Template:
http://holgerirmler.de/fcbtmp/?AcDIVs-Test

Das Plugin kann mehrere Akkordions auf einer Seite verwalten und auf Wunsch so zu Gruppen zusammenfassen, dass immer nur ein Inhalt offen ist.
Auch die Anregung, die Inhalte bei langem Content nach oben zu scrollen, ist schon eingebaut.
Die wichtigste Neuerung ist aber, dass die interne Suche nun in den Akkordions funktioniert.
Bei Treffern wird die Gruppierung aufgehoben und die jeweiligen Akkordions mit Treffen geöffnet dargestellt:
http://holgerirmler.de/fcbtmp/?AcDIVs-Test&search=fwe

Ich versuche das Plugin so schnell wie möglich zu beenden. Aber es wird wohl noch etwas dauern bis es verfügbar ist.

[frase]

Ich modernisiere gerade mein acDIVs-Plugin.

Sieht vielversprechend aus.
Mit "fhs-op2" wird es auch klappen?
Jetzt müsste man nur noch einen Transitionseffekt für das ▼ einbauen.

[SiNiTaSa]

Code: Select all

<div class="mceTmpl mceNonEditable">
 <div class="panel-group mceNonEditable" id="accordion2">
  <div class="panel panel-default mceNonEditable">
   <div class="panel-heading mceNonEditable">
    <p class="panel-title mceNonEditable"><a data-toggle="collapse" data-parent="#accordion2" href="#collapsefive" class="mceEditable">Olivenplatten</a></p>
   </div>

ändere mal bei deiner zweiten Seite alle id="accordion" und data-parent="#accordion" in id="accordion2" und data-parent="#accordion2 um.

Sollte dann funktionieren !


parent selector false

Wenn ein Selektor vorhanden ist, werden alle kollabierbaren Elemente unter dem angegebenen Elternteil geschlossen, wenn dieses zusammenklappbare Element angezeigt wird. (Ähnlich dem traditionellen Akkordeonverhalten - dies ist abhängig von der Panel-Klasse)

[frase]

Hi Sascha,
auch diesmal wieder:
Logisch und funktioniert hervorragend.
Danke.

@Traktorist und @Der Zwerch
Zur Erklärung.
Wenn ihr auf den Seiten (egal ob auf verschiedenen oder auf einer) mehrere Accordion-Gruppen haben wollt, dann müsst ihr die id-Namen der jeweiligen Gruppe unterschiedlich benennen.
Es bietet sich an bei der 2. Gruppe: id="accordion2" und data-parent="#accordion2".
Bei der 3. Gruppe: id="accordion3" und data-parent="#accordion3".

Außerdem müssen die jeweiligen Accordions (die Überschriften und auch die Inhalts-DIVs) eindeutig benannt werden.
Im Beispiel sind es die "href="#collapseX" (Link in der Überschrift) und die DIVs der Inhalte "<div id="collapseX"
Wobei "X" dann immer unterschiedlich zu den vorherigen sein muss. (im Beispiel evtl. collapse4, collapse5
...)

Auch bei den Modal-Boxen und bei den Tabs muss ähnlich vorgegeangen werden.
Wenn IDs mit gleichem Namen vorkommen, funktionierts nicht!