Hi @Dennis-DWFB,
bin persönlich kein großer Freund von Akkordeons, da sie aus meist aus Barrierefreiheitsgründen eher schwierig sind. (Ein weiterer Klick für den User; Man muss die einzelnen Reiter mit “Tab” und “Leertaste” ansteuern können etc). Das Beispiel aus der Code-Gallery ist - von Werk aus - nicht auf eine Tastatur Navigation ausgelegt.
Bei Bootstrap gibt es ein sehr gutes Akkordeon, welches man natürlich an HubSpot anpassen kann.
Das wäre eine angepasste Version:
Hier der Code:
<div class="accordion" id="{{ module.akkordeon_name|lower|cut(' ') }}">
{% for single_acc in module.akkordeon %}
<div class="accordion-item">
<h2 class="accordion-header" id="{{ single_acc.headline|lower|cut(' ') }}">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#{{ single_acc.headline|lower|cut(' ') }}" aria-expanded="true" aria-controls="{{ single_acc.headline|lower|cut(' ') }}">
{{ single_acc.headline }}
</button>
</h2>
<div id="{{ single_acc.headline|lower|cut(' ') }}" class="accordion-collapse collapse show" aria-labelledby="{{ single_acc.headline|lower|cut(' ') }}" data-bs-parent="#{{ single_acc.akkordeon_name|lower|cut(' ') }}">
<div class="accordion-body">
{{ single_acc.content }}
</div>
</div>
</div>
{% endfor %}
</div>
Bitte beachte, das hier noch die komplette CSS und Javascripts fehlen, die für die Funktionalität zuständig sind.
Den Content kann man natürlich individuell ausbauen. Beispielsweise mit einem sogeannten “Choise”(if-statement). Wie das Aussehen kann siehst du hier:
Code:
<div class="accordion" id="{{ module.akkordeon_name|lower|cut(' ') }}">
{% for single_acc in module.akkordeon %}
<div class="accordion-item">
<h2 class="accordion-header" id="{{ single_acc.headline|lower|cut(' ') }}">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#{{ single_acc.headline|lower|cut(' ') }}" aria-expanded="true" aria-controls="{{ single_acc.headline|lower|cut(' ') }}">
{{ single_acc.headline }}
</button>
</h2>
<div id="{{ single_acc.headline|lower|cut(' ') }}" class="accordion-collapse collapse show" aria-labelledby="{{ single_acc.headline|lower|cut(' ') }}" data-bs-parent="#{{ single_acc.akkordeon_name|lower|cut(' ') }}">
<div class="accordion-body">
{% if single_acc.content_typ == "text" %}
{{ single_acc.content }}
{% elif single_acc.content_typ == "form" %}
{% form
form_to_use="{{ single_acc.form_select.form_id }}"
response_response_type="{{ single_acc.form_select.response_type }}"
response_message="{{ single_acc.form_select.message }}"
response_redirect_id="{{ single_acc.form_select.redirect_id }}"
response_redirect_url="{{single_acc.form_select.redirect_url}}"
gotowebinar_webinar_key="{{ single_acc.form_select.gotowebinar_webinar_key }}"
%}
{% elif single_acc.content_typ == "image" %}
{% if single_acc.image_field.src %}
{% set sizeAttrs = 'width="{{ single_acc.image_field.width }}" height="{{ single_acc.image_field.height }}"' %}
{% if single_acc.image_field.size_type == 'auto' %}
{% set sizeAttrs = 'width="{{ single_acc.image_field.width }}" height="{{ single_acc.image_field.height }}" style="max-width: 100%; height: auto;"' %}
{% elif single_acc.image_field.size_type == 'auto_custom_max' %}
{% set sizeAttrs = 'width="{{ single_acc.image_field.max_width }}" height="{{ single_acc.image_field.max_height }}" style="max-width: 100%; height: auto;"' %}
{% endif %}
{% set loadingAttr = single_acc.image_field.loading != 'disabled' ? 'loading="{{ single_acc.image_field.loading }}"' : '' %}
<img src="{{ single_acc.image_field.src }}" alt="{{ single_acc.image_field.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
{% endif %}
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
Den Content bereich (accordion-body) kannst du natürlich noch nach Bedarf weiter ausbauen. Allerdings sind Akkordeons hauptsächlich für (lange) Texte gedacht.
VG
Anton