<section class="ds-example example-accordions">
    <div class="html">
        <div class="collapse-group custom-collapse">
            <div class="collapse-wrapper">
                <button class="collapse-header title-label" type="button" data-collapse="collapse_0">
                    Lorem ipsum
                </button>

                <div id="collapse_0" class="collapse-panel">
                    <div class="collapse-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium harum molestiae quas quidem veniam? Esse iste minima perferendis repellendus. Ab aperiam dolor ea ex odio saepe. Ab alias impedit quibusdam.
                    </div>
                </div>
            </div>
        </div>
    </div>
    <pre>
        <code>&lt;div class="collapse-group custom-collapse">
    &lt;div class="collapse-wrapper">
        &lt;button class="collapse-header title-label" type="button" data-collapse="ID_COLLAPSE">
            ...
        &lt;/button>

        &lt;div id="ID_COLLAPSE" class="collapse-panel">
            &lt;div class="collapse-body">
                ...
            &lt;/div>
        &lt;/div>
    &lt;/div>
&lt;/div></code>
    </pre>
</section>
<section class="ds-example example-accordions">
    <div class="html">
        <div class="collapse-group custom-collapse">
            {% for i in 1..5 %}
                <div class="collapse-wrapper">
                    <button class="collapse-header title-label {% if i==1 %}active{% endif %}" type="button" data-collapse="collapse_{{ i }}">
                        Lorem ipsum #{{ i }}
                    </button>

                    <div id="collapse_{{ i }}" class="collapse-panel">
                        <div class="collapse-body">
                            #{{ i }}
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium harum molestiae quas quidem veniam? Esse iste minima perferendis repellendus. Ab aperiam dolor ea ex odio saepe. Ab alias impedit quibusdam.
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    <pre>
        <code>&lt;div class="collapse-group custom-collapse">
    &lt;div class="collapse-wrapper">
        &lt;button class="collapse-header title-label active" type="button" data-collapse="ID_COLLAPSE">
            ...
        &lt;/button>

        &lt;div id="ID_COLLAPSE" class="collapse-panel">
            &lt;div class="collapse-body">
                ...
            &lt;/div>
        &lt;/div>
    &lt;/div>
    &lt;div class="collapse-wrapper">
        &lt;button class="collapse-header title-label" type="button" data-collapse="ID_COLLAPSE_2">
            ...
        &lt;/button>

        &lt;div id="ID_COLLAPSE_2" class="collapse-panel">
            &lt;div class="collapse-body">
                ...
            &lt;/div>
        &lt;/div>
    &lt;/div>
    &lt;div class="collapse-wrapper">
        ...
    &lt;/div>
&lt;/div></code>
    </pre>
</section>
<section class="ds-example example-accordions">
    <div class="html">
        <div class="collapse-group custom-accordion">
            {% for i in 1..5 %}
                <div class="collapse-wrapper">
                    <button class="collapse-header title-label {% if i==1 %}active{% endif %}" type="button" data-collapse="accordion_{{ i }}">
                        Lorem ipsum #{{ i }}
                    </button>

                    <div id="accordion_{{ i }}" class="collapse-panel">
                        <div class="collapse-body">
                            #{{ i }}
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium harum molestiae quas quidem veniam? Esse iste minima perferendis repellendus. Ab aperiam dolor ea ex odio saepe. Ab alias impedit quibusdam.
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    <pre>
        <code>&lt;div class="collapse-group custom-accordion">
    &lt;div class="collapse-wrapper">
        &lt;button class="collapse-header title-label active" type="button" data-collapse="ID_COLLAPSE">
            ...
        &lt;/button>

        &lt;div id="ID_COLLAPSE" class="collapse-panel">
            &lt;div class="collapse-body">
                ...
            &lt;/div>
        &lt;/div>
    &lt;/div>
    &lt;div class="collapse-wrapper">
        &lt;button class="collapse-header title-label" type="button" data-collapse="ID_COLLAPSE_2">
            ...
        &lt;/button>

        &lt;div id="ID_COLLAPSE_2" class="collapse-panel">
            &lt;div class="collapse-body">
                ...
            &lt;/div>
        &lt;/div>
    &lt;/div>
    &lt;div class="collapse-wrapper">
        ...
    &lt;/div>
&lt;/div></code>
    </pre>
</section>
