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.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

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'
    })
}}

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',
        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',
        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',
        linkUrl: '/to-some-page',
        linkTitle: 'My link',
        isDisabled: true
    })
}}

Macro source code¶

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

    {% if options.title %}
        <h-accordion-toggler class="accordion__toggler">
            {% if options.linkUrl %}

                    <div class="module__link-wrapper">
                        <div class="module__header-title">
                            <span class="module__header_highlight">{{ options.title }}</span>
                        </div>

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

                            {{
                                icon('icon-arrow-right', {
                                    variant: 'link'
                                })
                            }}
                        </a>

                </div>
            {% else %}
                <div class="module__header-title">
                    <span class="module__header_highlight">{{ options.title }}</span>
                </div>
            {% endif %}

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