Как сделать, чтобы блок с полной информацией открывался ниже ряда?

Question

[One of Us]

Здравствуйте!
Объясните, пожалуйста, как реализуется такое поведение блока. Например, как на "Медиамаркт", мы кликаем в каталоге по кнопке "Показать все" и ниже этого ряда блоков появляется блок с полной информацией. И каждый раз ниже определенного ряда. Огромное спасибо.

https://mediamarkt.ru/catalog (Не реклама).

Answer 1

[serik]

Как вариант можно разделить каталог товара на 3 дива (в зависимости от кол-ва категорий)
И между первым и вторым div'ом выводить блок с полной информацией, который будет заполняться в зависимости от выбранной категории товара / в зависимости от нажатой кнопки. И так аналогично для каждого уровня... манипулируешь всем этим на js.

<div>
    <div></div>
    <div></div>
    <div></div>
     ...
</div>
<div style="display: none"></div>
<div>
    <div></div>
    <div></div>
    <div></div>
     ...
</div>
<div style="display: none"></div>
<div>
    <div></div>
    <div></div>
    <div></div>
     ...
</div>

Comments

[One of Us]

А какой алгоритм для js-ки будет? Типо я жму по какому-то блоку, он находит родителя с каким-то классом, потом ищет соседа спереди с каким-то классом и создает или как-то загружает инфу там?

[serik]

Влад Поезжаев, вообще, в идеале это делается при помощи серверного языка, как вариант, как один из способов как можно сделать, это каждому блоку с категорией ("Телефоны") задать фиксированную высоту, и перечислить в этом блоке все разделы ("Все смартфоны, смарт-часы..."), и задать блоку что бы все что не помещается в блоке, просто не отображалось.
И при нажатии на определенную кнопку, js берет все эти разделы в блоке и вставляет в скрытый блок.

[One of Us]

Сергей Сапогин, интересно)))