Два div в одной строке при нажатии на один разворачиваются оба tailwind css Django alpine js

изображение перед открытием div

изображение после нажатия на div

ФРАГМЕНТ КОДА

PARENT

   <div class="flex flex-wrap justify-between gap-x-4 mt-8">
    
</div>

CHILD

<div x-init x-data="{expanded: false}" :class="expanded ? 'h-full' : 'h-12'" class="w-full md:w-48/100 flex flex-col">
<div @click="expanded = !expanded" class="flex items-center px-10 py-4 border-b bg-white rounded-lg cursor-pointer">
    <div class="font-bold font-lato text-xsm bg-white">{{ value.question }}</div>
    <div class="ml-auto p-2">
        <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.77083 0.937549C7.68535 0.850049 7.57545 0.812549 7.46555 0.812549C7.35565 0.812549 7.23354 0.862549 7.16027 0.937549L4.03424 4.11255L0.932622 0.937549C0.847145 0.850049 0.725034 0.800049 0.615134 0.800049C0.505234 0.800049 0.383123 0.850049 0.309857 0.925049C0.138902 1.10005 0.138902 1.38755 0.309857 1.56255L3.71675 5.06255C3.8877 5.23755 4.16856 5.23755 4.33951 5.06255L7.75862 1.57505C7.94178 1.40005 7.94178 1.11255 7.77083 0.937549Z"
                  fill="#080F33">
            </path>
        </svg>
    </div>
</div>
<div x-show="expanded" class="px-10 py-4 text-left font-lato bg-gray-50 text-gray-500 flex-1">
    {{ value.answer|richtext }}
</div>

Я просмотрел ваш фрагмент кода. Ваш правый вариант не расширяется. Это может выглядеть так, потому что ваш текущий HTML/CSS расширяет родительский контейнер. Если вы хотите иметь 2 отдельные колонки, вам нужно сделать это в HTML/CSS:

Как вы видите, я разделил ваши колонки на 2 разных элемента inline-block. Таким образом, они не воспринимаются как один родитель, и разворачивание дочернего элемента не приведет к разворачиванию контейнера с другой стороны.

Вернуться на верх