module_accordion_toggler

The module_accordion_toggler macro is used to render a single module accordion toggler on a page. This macro should be used within an accordion component.

Definition

{% module_accordion_toggler(options) %}

Input parameters

options

object represents an object of configuration options

Option key	Type	Default	Required	Description
options.title	string	""	yes	The title of the toggler
options.level	string	""	yes	Section level of a title. You can read more about heading elements here
options.hasUnderline	boolean	""	yes	If set to true the underline will be displayed beneath the title
options.classNames	string	""	yes	The list of classes that will be added to the toggler
options.attributes	object	""	yes	Key value object of additional attributes that will be added to the toggler
options.noHighlight	string	""	yes	If set to true the toggler will have no highlight
options.linkUrl	string	""	no	If set, the link to this url will be displayed next to the title. If not specified the link will not be rendered
options.linkTitle	string	""	no	The title of the link rendered next to the title
options.isDisabled	boolean	false	no	Tf set to true there will be no arrow indicating whether an accordion is currently closed or not

options.attributes

options.attributes parameter represents a key value object of additional attributes that will be added to the toggler.

Example of the options.attributes object:

{
    my-attribute: 'my-attribute-value',
    data-scroll: 'my-scroll-element-id'
}

Example

In this example we render a plain module accordion toggler

{% from "@macros/module_accordion_toggler.twig" import module_accordion_toggler %}

{{
    module_accordion_toggler({
        title: 'Toggler title',
        level: 'h2'
    })
}}

Example

In this example we render a module accordion toggler with a custom link

{% from "@macros/module_accordion_toggler.twig" import module_accordion_toggler %}

{{
    module_accordion_toggler({
        title: 'Toggler title',
        level: 'h2',
        linkUrl: '/to-some-page',
        linkTitle: 'My link',
    })
}}

Example

In this example we render a disabled module accordion toggler

{% from "@macros/module_accordion_toggler.twig" import module_accordion_toggler %}

{{
    module_accordion_toggler({
        title: 'Toggler title',
        level: 'h2',
        isDisabled: true
    })
}}

Example

In this example we render a disabled module accordion toggler with a custom link

{% from "@macros/module_accordion_toggler.twig" import module_accordion_toggler %}

{{
    module_accordion_toggler({
        title: 'Toggler title',
        level: 'h2',
        linkUrl: '/to-some-page',
        linkTitle: 'My link',
        isDisabled: true
    })
}}

Example

In this example we render a module accordion toggler with custom attributes and no highlight

{% from "@macros/module_accordion_toggler.twig" import module_accordion_toggler %}
{{
    module_accordion_toggler({
        title: 'Toggler title',
        level: 'h2,
        noHighlight: true,
        attributes: {
            data-scroll: 'my-id'
        }
    })
}}

Macro source code

{% macro module_accordion_toggler(options) %}
    {% from "@macros/icon.twig" import icon %}

    {% set shouldDisplayHeaderUnderline = (options.noHighlight and not options.isDisabled) or not options.noHighlight %}

    {% set optionsLevel = options.level ?: 'h2' %}

    {% if options.title %}
        <{{ optionsLevel }}
            class="
                header_{{ optionsLevel }}
                module__header
                {% if shouldDisplayHeaderUnderline %} header_underline {% endif %}
                {{ options.classNames }}
            "
            {% for attributeName, attributeValue in options.attributes %}
                {{ attributeName }}="{{ attributeValue }}"
            {% endfor %}
        >
            <h-accordion-toggler class="accordion__toggler" {% if options.isDisabled %}disabled{% endif %}>
                {% if options.linkUrl %}
                        <div class="module__link-wrapper">
                            <div class="module__header-title">
                                <span
                                    class="
                                        module__header-content
                                        {% if not options.noHighlight %} module__header_highlight {% endif %}
                                    "
                                >
                                    {{ options.title }}
                                </span>
                            </div>

                            <a href="{{ options.linkUrl }}" class="module__link link_no-underline">
                                {{ options.linkTitle }}

                                {{
                                    icon('icon-arrow-right', {
                                        variant: 'link',
                                        ariaHidden: true
                                    })
                                }}
                            </a>
                    </div>
                {% else %}
                    <div
                        class="
                            module__header-title
                            {% if not options.noHighlight %} module__header-title_highlight {% endif %}
                        "
                    >
                        <span
                            class="
                                module__header-content
                                {% if not options.noHighlight %} module__header_highlight {% endif %}
                            "
                        >
                            {{ options.title }}
                        </span>
                    </div>
                {% endif %}

                {% if not options.isDisabled %}
                    {{ icon('icon-chevron-down', {
                        classNames: ['accordion__toggler-icon']
                    }) }}
                {% endif %}
            </h-accordion-toggler>
        </{{ optionsLevel }}>
    {% endif %}
{% endmacro %}