Как открыть блок под кнопкой на которую был клик?

Question

[bett22]

Подскажите пожалуйста. Есть колонки, при клике на колонку под ней на всю ширину открывается контент. Но проблема в том что при адаптиве колонки изменяют свое положение и контент открывается не под кнопкой на которую был клик, а совершенно в другом месте. Как можно сделать так что-бы всегда, вне зависимости от положение колонок блок открывался всегда под ними? Спасибо

Comments

[modelair]

ну, конечно же. потому что контент, привязанный к вашей кнопке, совсем в другом месте лежит.
разметку пересмотрите

[bett22]

modelair, так а как разметку сделать так, что-бы адаптив тоже подстраивался? я всю голову сломал и не нашел решения

[modelair]

bett22, нужно чтобы у кнопки и контента был общий родитель.
посмотрите, например, как сделан аккордеон в bootstrap.
https://getbootstrap.com/docs/5.0/components/accordion/

[bett22]

modelair, ну это я понимаю. Тут проблема в том что блок должен открыться на всю ширину строки, а в ней может быть как 2 кнопки, так и 4

[modelair]

bett22, ну вот у вас блок открывается после первых четырех почему? потому что и находится после них. следующий - после восьми. какое вы на основе этой разметки хотели поведение получить? переставьте блоки, будет разница.
нужно пересматривать разметку. возможно, стоит вообще повыкидывать множество детей .content, оставить только одного, в которого по клику и добавлять нужные данные.

[bett22]

modelair, а вы не знаете как их можно переставить при адаптиве?

[Ankhena]

Каждый контент поставьте после соответствующей кнопки.
Используйте гриды и dense.

Answer 1

[Сергей delphinpro]

Нужно сделать простую разметку

<div class="body">
  <button class="button">B1</button>
  <div class="content">Content 1</div>

  <button class="button">B2</button>
  <div class="content">Content 2</div>

  <button class="button">B2</button>
  <div class="content">Content 2</div>
</div>

А потом раскладку делать флексами+order или гридами. И медиа запросы к любому варианту