<div class="px-5 pb-4 -mx-5 border-b border-white sm:mx-0 sm:px-0 border-opacity-10 sm:border-none sm:pb-0"
x-data="{ open: false }"
>
<div class="flex items-center justify-between cursor-pointer sm:mb-6 sm:cursor-none"
@click="open = !open"
:class="{ 'mb-6' : open }"
>
<h4 class="text-lg md:text-2xl"> {{ pimcore_input('footer_'~column_id~"_title", {'placeholder': "Voeg titel toe" }) }}</h4>
<span
class="flex items-center justify-center w-5 h-3 transition-all duration-300 sm:hidden shrink-0"
:class="{ 'rotate-180' : open }"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 10">
<path fill="#8A8D94" fill-rule="evenodd"
d="m.389 2.36 6.73 6.963c.24.25.576.39.926.39.35 0 .685-.14.925-.39l6.732-6.963a1.206 1.206 0 0 0-.067-1.749l-.113-.09a1.297 1.297 0 0 0-1.67.154l-5.807 6.01L2.239.677A1.295 1.295 0 0 0 .456.612 1.204 1.204 0 0 0 .39 2.36H.389Z"/>
</svg>
</span>
</div>
<div class="block overflow-hidden max-h-0 sm:max-h-max"
:style="open ? `max-height: 100%` : ``"
>
<ul>
{% for columnlinks in pimcore_iterate_block(pimcore_block('footer_'~column_id~"_links")) %}
<li>
{{ pimcore_link('footer_sub_link_'~column_id, {'class': "hover:text-blue"}) }}
</li>
{% endfor %}
</ul>
</div>
</div>