Servus zusammen,
wer kann helfen?
Wenn ich unter Abschnitt “FAQ” hinzufüge..
Bei “click” auf den ersten Tab, fährt das Menu nach unten auf.
Bei “click” auf den nächsten Tab, fährt dieses dann auf → allerdings bleibt auch der vorherige Tab offen und schließt nicht automtisch…
Ziel sollte es sein, dass sich bei jedem öffnen eines weiteren Tabs, der noch vorherige offene Tab schließt.
Kann wer helfen?
VG Dennis
Hey @D-PG
Danke für die Frage und da dies sehr Theme- und Code-abhängig ist würde es uns hier helfen wenn du uns einen Link zu einer Vorschau oder Demo-FAQ Seite hier geben könntest. Ist das auf einer Page oder ist das ein Abschnitt im Theme Editor? Um welches Theme handelt es sich?
So wie du es aber beschreibst könnte es das erwartete Systemverhalten deiner Akkordeon FAQ Seite sein so dass man immer noch den vorherigen Text sehen kann zum Vergleich mit dem aktuell-geöffneten Tab. Das vorherigen Tab muss man dann manuell schliessen.
Du kannst aber etwas HTML oder CSS in den Akkordeon FAQ Code einbauen, so dass das nicht-fokussierte Tab sich schließt sobald man das neue Tab auswählt. Damit rumzubasteln überlasse ich aber dir und dieser Leitfaden kann dir dabei ggf. behilflich sein.
Lass wissen, wenn du weitere Fragen hast zum obigen Thema oder generell zu deinem Shop und Business und gerne können wir das hier weiter besprechen!
Wir führen gerade eine kurze Umfrage zu Eurer Erfahrung in der Community durch mit 5 kurzen Fragen. Wenn Du mal 2-Min Zeit hast - die Umfrage ist auch anonym:
Hi Gabe,
genau es handelt sich um einen Abschnitt im Theme Editor. So wie du es beschreibst, sollte es auch sein. Der vorherige Tab, sollte nach weiterem Öffnen eines neuen Tabs automatisch schließen.
Den Leitfaden habe ich mir angesehen, allerdings blicke ich da nicht durch ;/…
HTML Code kann ich einbauen, sofern ich weiß, wie dieser definiert sein sollte. Es gibt die faq.liquid, vielleicht hast du oder wer anders einen Hinweis für mich:
{%- endif -%}
{%- if section.settings.title != blank -%} {%- endif -%} {%- if section.blocks.size > 0 -%} {%- for block in section.blocks -%}
{% case block.type %} {% when 'rich-text'%}
{%- if block.settings.title != blank -%}
{{ block.settings.title | escape }}
{%- endif -%} {%- if block.settings.text != blank -%}{%- if block.settings.enlarge_text %}
{% endif -%} {{ block.settings.text }} {%- if block.settings.enlarge_text %}
{% endif -%}
{%- endif -%}
{% when 'question'%}
{{ block.settings.text }}
{% endcase %}
{%- endfor -%} {%- endif -%} {%- if section.blocks.size == 0 -%}{{ 'home_page.onboarding.no_content' | t }}
{%- endif -%}
{%- if section.settings.divider -%}
{%- endif -%} {% schema %} { "name": "t:sections.faq.name", "class": "index-section", "settings": [ { "type": "text", "id": "title", "label": "t:sections.faq.settings.title.label", "default": "FAQs" } ], "blocks": [ { "type": "rich-text", "name": "t:sections.faq.blocks.rich_text.name", "settings": [ { "type": "text", "id": "title", "label": "t:sections.faq.blocks.rich_text.settings.title.label", "default": "Rich text" }, { "type": "richtext", "id": "text", "label": "t:sections.faq.blocks.rich_text.settings.text.label", "default": "
Use this section for any descriptive text you need to fill out your pages or to add introductory headings between other blocks.
" }, { "type": "select", "id": "align_text", "label": "t:sections.faq.blocks.rich_text.settings.align_text.label", "default": "left", "options": [ { "value": "left", "label": "t:sections.faq.blocks.rich_text.settings.align_text.options.left.label" }, { "value": "center", "label": "t:sections.faq.blocks.rich_text.settings.align_text.options.center.label" }, { "value": "right", "label": "t:sections.faq.blocks.rich_text.settings.align_text.options.right.label" } ] } ] }, { "type": "question", "name": "t:sections.faq.blocks.question.name", "settings": [ { "type": "text", "id": "title", "label": "t:sections.faq.blocks.question.settings.title.label", "default": "Frequently asked question" }, { "type": "richtext", "id": "text", "label": "t:sections.faq.blocks.question.settings.text.label", "default": "
Use this text to answer questions in as much detail as possible for your customers.
" } ] } ], "presets": [ { "name": "t:sections.faq.presets.faq.name", "blocks": [ { "type": "question" }, { "type": "question" } ] } ] } {% endschema %} ```
VG DPG
Hi Gabe,
ganz genau so soll es sein. Bei öffnen einen weiteren Tabs sollte sich der vorherige automatisch schließen. Ich habe mir den Leitfaden angesehen, blicke ich leider nicht wirklich durch ;/..
Vielleicht kanns du oder jemanden der da jemanden kennt ;), sich mal unsere FAQ.liquid ansehen und mir gegebenenfalls die passende Stelle mit Code sagen:
{%- endif -%}
{%- if section.settings.title != blank -%} {%- endif -%} {%- if section.blocks.size > 0 -%} {%- for block in section.blocks -%}
{% case block.type %} {% when 'rich-text'%}
{%- if block.settings.title != blank -%}
{{ block.settings.title | escape }}
{%- endif -%} {%- if block.settings.text != blank -%}{%- if block.settings.enlarge_text %}
{% endif -%} {{ block.settings.text }} {%- if block.settings.enlarge_text %}
{% endif -%}
{%- endif -%}
{% when 'question'%}
{{ block.settings.text }}
{% endcase %}
{%- endfor -%} {%- endif -%} {%- if section.blocks.size == 0 -%}{{ 'home_page.onboarding.no_content' | t }}
{%- endif -%}
{%- if section.settings.divider -%}
{%- endif -%} {% schema %} { "name": "t:sections.faq.name", "class": "index-section", "settings": [ { "type": "text", "id": "title", "label": "t:sections.faq.settings.title.label", "default": "FAQs" } ], "blocks": [ { "type": "rich-text", "name": "t:sections.faq.blocks.rich_text.name", "settings": [ { "type": "text", "id": "title", "label": "t:sections.faq.blocks.rich_text.settings.title.label", "default": "Rich text" }, { "type": "richtext", "id": "text", "label": "t:sections.faq.blocks.rich_text.settings.text.label", "default": "
Use this section for any descriptive text you need to fill out your pages or to add introductory headings between other blocks.
" }, { "type": "select", "id": "align_text", "label": "t:sections.faq.blocks.rich_text.settings.align_text.label", "default": "left", "options": [ { "value": "left", "label": "t:sections.faq.blocks.rich_text.settings.align_text.options.left.label" }, { "value": "center", "label": "t:sections.faq.blocks.rich_text.settings.align_text.options.center.label" }, { "value": "right", "label": "t:sections.faq.blocks.rich_text.settings.align_text.options.right.label" } ] } ] }, { "type": "question", "name": "t:sections.faq.blocks.question.name", "settings": [ { "type": "text", "id": "title", "label": "t:sections.faq.blocks.question.settings.title.label", "default": "Frequently asked question" }, { "type": "richtext", "id": "text", "label": "t:sections.faq.blocks.question.settings.text.label", "default": "
Use this text to answer questions in as much detail as possible for your customers.
" } ] } ], "presets": [ { "name": "t:sections.faq.presets.faq.name", "blocks": [ { "type": "question" }, { "type": "question" } ] } ] } {% endschema %} ```
VG Dennis
So einfach wird nicht gehen denn beim On-Click Event auf ein neues ausklappbares Tab muss im Code dieses aufgeklappte Tab auch ein Javascript exekutiert werden, dass das vorherige Tab schließt. Nur wie soll der Code erkennen können welches der Tabs genau vorher geöffnet wurde? Es könnte ja jedes der Tabs in der FAQ Seite sein.
Aber ggf. hat der @Finer ein Trick im Ärmel? Welches Theme ist das und hast du einen Link?
@Gabe ich muss mich hier @Gabe anschließen. Aktuell erkennt das Script zwar, ob ein Tab offen oder geschlossen ist. Aber es weiß nicht, dass die anderen alle geschlossen werden sollen, sobald ein neues geöffnet wird. Leider sind meine Javascript-Kenntnisse in diesem Bezug nicht ausreichend, um eine Lösung bieten zu können.
Hast du die Theme-Entwickler gefragt, ob sie das ggf. anpassen können?