Accordion (Collapsible) Darstellung

[Dachzelt]

Hallo. Ich nutze ein Accordion um Details darzustellen - insgesamt 3 Titel mit Content. Nun möchte ich, dass immer das erste (Highlights) offen ist. Wie kann ich das machen? 

 

Hier der Code!

{%- comment -%}
----------------------------------------------------------------------------------------------------------------------
ACCORDION COMPONENT
----------------------------------------------------------------------------------------------------------------------

This component is used to create an accordion (also called as collapsible). It internally uses the "details" HTML
tag so that it can also be used without any JavaScript.

********************************************
Supported parameters
********************************************

* title: the title to use for the toggle button
* icon: an optional icon attached to the title
* content: the hidden content inside the accordion
* open: if set to true the accordion is open by default
* size: if set to "lg", the font is and spacing is bigger
* class: any additional class
* id: an optional ID for the accordion

Mein Test mit for:
{% for i in (1..3) -%}
  {%- if i == 1 -%}
    {% assign open = 'false' %}
  {%- else -%}
    {% assign open = 'false' %}
  {%- endif -%}
{%- endfor %}
{%- endcomment -%}

<details {% if id %}id="{{ id | escape }}"{% endif %} class="{{ class }} accordion {% if size %}accordion--{{ size }}{% endif %} group" aria-expanded="{% if open %}true{% else %}false{% endif %}" is="accordion-disclosure" {% if open %}open{% endif %} {{ block.shopify_attributes }}>
  <summary>
    {%- comment -%}iOS 14 does not support flex on the summary itself, so we have to use this extra div{%- endcomment -%}
    <div class="accordion__toggle bold">
      {%- if icon -%}
        <div class="text-with-icon">
          {%- render 'icon' with icon -%}
          <span style="color:#9DCC4C" class="h4">{{- title | escape -}}</span>
        </div>
      {%- else -%}
        
        
        {% if page.id == 106658988348 %} 
          <span style="color:#000000" class="h6">{{- title | escape -}}</span>
        {%- else -%}
          <span style="color:#9DCC4C" class="h6">{{- title | escape -}}</span>
        {% endif %} 
    {%- endif -%}

      <span class="circle-chevron group-hover:colors group-expanded:colors group-expanded:rotate">{%- render 'icon' with 'chevron-bottom-small' -%}</span>
    </div>
 </summary>
  
  <div class="accordion__content">
    {{- content -}}
  </div> 
</details>

Ich habe es schon mit der Schleife for probiert - das zerschießt aber alles bzw. stellt jeden Titel 3x dar... 
Hat jemand eine Idee?

Viele Grüße S

[Gabe]

Hey @Dachzelt 

Die meisten Themes haben bereits solche Collapsible Tabs eingebaut und der Code den du verwendest wird auch Theme-abhängig sein denn alle Themes sind anders strukturiert im Code. Welches Theme verwendest du wenn ich fragen darf?

Man sollte auch bedenken, dass wenn immer das erste (Highlights) by-default offen ist, das nicht unbedingt gut für die Barrierefreiheiten sein kann. Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du die hier eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Dein Code

Es könnte in deinem Code Beispiel oben sein, dass der Abschnitt des Codes, der mit der For-Loop spielt, ggf. nicht an der richtigen Stelle eingefügt wurde und daher wenig Einfluss auf das Accordion-Verhalten haben wird.

Man kann das open Attribut des details Tags verwenden, um den ersten Accordion-Inhalt standardmäßig zu öffnen und es so einstellen, dass open nur dann True ist, wenn es sich um das erste Element handelt.

Hier ein Beispiel:

{% for i in (1..3) -%}
<details {% if id %}id="{{ id | escape }}"{% endif %} class="{{ class }} accordion {% if size %}accordion--{{ size }}{% endif %} group" aria-expanded="{% if i == 1 %}true{% else %}false{% endif %}" is="accordion-disclosure" {% if i == 1 %}open{% endif %} {{ block.shopify_attributes }}>
  <summary>
    <div class="accordion__toggle bold">
      {% if icon %}
        <div class="text-with-icon">
          {% render 'icon' with icon %}
          <span style="color:#9DCC4C" class="h4">{{- title | escape -}}</span>
        </div>
      {% else %}
        {% if page.id == 106658988348 %} 
          <span style="color:#000000" class="h6">{{- title | escape -}}</span>
        {% else %}
          <span style="color:#9DCC4C" class="h6">{{- title | escape -}}</span>
        {% endif %} 
      {% endif %}
      <span class="circle-chevron group-hover:colors group-expanded:colors group-expanded:rotate">{% render 'icon' with 'chevron-bottom-small' %}</span>
    </div>
 </summary>
  
  <div class="accordion__content">
    {{- content -}}
  </div> 
</details>
{% endfor %}

Hier wird die For-Loop um den details Tag gewrapped, so dass für jedes Element ein neuer details Tag erstellt wird. Zudem ist das open Attribut und aria-expanded auf true gesetzt, wenn i == 1, was bedeutet, dass es sich um das erste Element handelt. Bitte beachte aber, dass du in deinem Kontext sicherstellen solltest, dass title und content entsprechend angepasst werden, um die richtigen Werte für jedes Accordion-Element zu liefern.

So einfach ist das nicht und wir haben auch ein paar Apps die das können, wenn du dir die ganze Arbeit sparen möchtest und dich lieber auf die Kernkompetenzen des Shops konzentrieren möchtest -> das Aufbauen eines erfolgreichen Business mit super Umsätze.

In dieser App Demo ist beispielsweise der erste Akkordeon Element automatisch auf open == true gesetzt. Wie hört sich das an?