WBCE CMS Forum

franzluwein

Mitglied

2 x Accordion nebeneinander

Hallo

bei mir laufen auf mehreren Seiten Accordion-Module 2.4.
Diese enthalten Kontaktdaten und andere Infos, die in der Breite wenig Platz einnehmen.

In der view.php (Zeile 53) könnte man ja mit

echo '<div class="wb-accordion '.$icon_placement.' '.$icon.' sid-'.$section_id.'" style="width: 50%;">';

die Accordions halbieren.
Gibt es eine Möglichkeit zwei dieser halben Accordions nebeneinander zu platzieren?
Was wäre zu tun, um diese in der "Handyansicht" untereinander angezeigt zu bekommen?
Ist das mit vertretbarem Aufwand zu realisieren oder wird das ein neues Modul?

Mit freundlichem Gruß

Franz Luwein

bernd

Core-Team

Re: 2 x Accordion nebeneinander

In der view.php rumfummeln ist bischen suboptimal,
- die Änderungen würden für alle Accordions gelten, auch wenn du doch mal irgendwo ein breites bräuchtest,
- bei evtl. Updates musst du dran denken das die Änderungen überschrieben werden.

Besserer Weg:
im Header des einen Accordions ein

<div class="my-accordion-left">

und beim anderen ein

<div class="my-accordion-right">

eintragen
und im jeweiligen Footer das div schließen

</div>

Und schon sind die beiden Accordions mit zusätzlichen CSS-Klassen versehen, die du in der frontend.css nach belieben stylen kannst, für die Mobile-Ansicht dann eben auch mit entsprechenden Abfragen.
Die Klassennamen kannst du natürlich frei wählen.

Nachtrag:
falls du ein Template verwendest, das eh schon mit einem Grid-System arbeitet, kann man natürlich auch gleich die entsprechenden Grid-Klassen verwenden die sich dann um alles weitere kümmern sollten.

Beitrag geändert von bernd (15.08.2019 16:56:31)

---

... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

franzluwein

Mitglied

Re: 2 x Accordion nebeneinander

Hallo Bernd,

Danke für den Rat.
Dass sich bei meiner "Stümper-Methode" alle Accordions ändere, hatte ich bemerkt und auf das Forum gehofft.
Ich finde deinen Ansatz toll und freue mich, dass es möglicherweise gaaaanz einfach ist.
Verrate mir bitte in welcher Datei ich suchen soll, um die richtige Stelle zu finden.

mit freundlichem Gruß

Franz Luwein

bernd

Core-Team

Re: 2 x Accordion nebeneinander

Verrate mir bitte in welcher Datei ich suchen soll, um die richtige Stelle zu finden.

???
Den Eintrag für Header und Footer machst du in den "Einstellungen" des jeweiligen Accordion-Abschnitts.
Wenn du ein Grid-Template verwendest und die entsprechenden Klassen verwendest, sollte es das schon gewesen sein.
Wenn du eigene Klassen definierst dann halt entweder die frontend.css vom Accordion entsprechend ergänzen oder gleich in der CSS-Datei des Templates.

Wenn du mir noch verrätst welches Template du verwendest (meine Glaskugel ist grade zur Inspektion  ) könnte ich noch direkter antworten.

---

... nein in Europa verwenden wir beim Programmieren nicht € statt $ ...

florian

Administrator

Re: 2 x Accordion nebeneinander

Bei allen Templates auf Responsee-Basis (WBCEZon, WBCETik, Buschwerk, Zweinullig):
<div class="m-6 s-12">
Bei allen Templates auf Fit(r)grid-Basis (Lesefaken, fg-grey, darkspace,...)
<div class="fg6">
Bei allen Templates auf Gridism-Basis (Fruehlingsbunt, Kingcontent):
<div class="unit half">
Bei allen Bootstrap-Templates (Clean Blog, AdvebtureStrap):
<div class="col-xs-12 col-md-6">

franzluwein

Mitglied

Re: 2 x Accordion nebeneinander

Hallo Bernd,

für mich arbeitet das Template "lesefaken" welches das fitgrid CSS-Grid verwendet.
Ich habe die Stellen gefunden und die vorgeschlagenen Eintragungen vorgenommen. Das war viel einfacher als ich gedacht habe.

Es handelt sich um vier Accordions.
Nr1: lang, links - Nr3: kurz, rechts
Nr2: kurz, links - Nr4: lang, rechts

Wie sage ich das in CSS?
width: 50%; ist klar, aber die vier <div ...> wollen einfach nicht dorthin wo sie hin sollen. Z.Zt.: Nr1 links, Nr2, Nr3, Nr4 rechts
Auch das "untereinander" im Handy-Modus habe ich noch nicht hinbekommen.

Welche Reihenfolge (Nr1, ... ) im Backend ist richtig?

Gruß

Franz Luwein

florian

Administrator

Re: 2 x Accordion nebeneinander

Nr. 1
Header: <div class="fg6">
Footer: leer
Nr.2
Header: leer
Footer: </div>
Nr. 3
Header: <div class="fg6">
Footer: leer
Nr.4
Header: leer
Footer: </div>

franzluwein

Mitglied

Re: 2 x Accordion nebeneinander

Perfekt!
Danke!

Mit freundlichem Gruß

Franz Luwein