digitalfabrik/integreat-cms

{# Set collapsed=True when including this template to show the box collapsed in the beginning #}
<div class="rounded {% if 2_cols %} 2xl:col-span-2 {% endif %} shadow-2xl border border-blue-500 bg-white mb-4">
    <div {% if box_id %}id="{{ box_id }}"{% endif %}
         class="collapsible cursor-pointer rounded p-4 bg-water-500 text-black font-bold flex justify-between"
         {% if collapsed %}data-collapsed{% endif %}>
        <span>
            <i icon-name="{% spaceless %}{% block collapsible_box_icon %}{% endblock collapsible_box_icon %}{% endspaceless %}"
               class="pb-1"></i>
            {% block collapsible_box_title %}
            {% endblock collapsible_box_title %}
        </span>
        <i icon-name="chevron-up"
           class="up-arrow {% if collapsed %}hidden{% endif %}"></i>
        <i icon-name="chevron-down"
           class="down-arrow {% if not collapsed %}hidden{% endif %}"></i>
    </div>
    <div class="collapsible-content transition-all duration-200 ease-in-out overflow-hidden {% if collapsed %}h-0{% endif %}">
        <div class="{% if not no_padding %} p-4{% endif %}">
            {% block collapsible_box_content %}
            {% endblock collapsible_box_content %}
        </div>
    </div>
</div>