Как реализовать такой тогл с переключением?

Question

[Игорь]

Вот тут на сайте очень красиво выполнен рездел с клиентами, но я тупо не могу понять как это правильно реализовать
тыц
Может есть какой либо плагин?

Comments

[Stalker_RED]

А что именно там непонятного или крутого? Мне он наоборот, показался кривым.

Answer 1

[Zombie42679]

Что именно не понятно ? Скролл вниз по клику или что ?

Comments

[Игорь]

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

[Zombie42679]

Игорь, Насколько я понимаю, это делается через JS, вставка идёт сразу после элемента, JS забирает логотип и описание, которое спрятано внутри элемента и создает новый элемент на основе этих, только растянутый на всю ширину.

Можно сделать проще, под каждым блоком с картинкой размещать блоки с нужной информацией, но делать их скрытыми, а при клике делать .slideDown() / .slideUp() , так же будут плавно вниз выезжать.

[Игорь]

Zombie42679, То есть я делаю 4 div с шириной в 25%, на каждый из них вешаю клас который по клику будет slideDown() скрытого блока с информацией, которая по клику будет отображаться
Теперь у меня есть несколько непоняток, как сделать при существовании 5 блков что бы по клику на 5й сверху был slideUp()
А снизу под ним ещё один блок slideDown()?
Может если вас не затруднит вы бы могли поэтапно написать какая логика работы всех элементов
Или может кодом(ультранаглость с моей стороны)

[Zombie42679]

Игорь,

Можно внутрь айтема поместить контент, тогда проще будет - по клику даем активный класс и раскрываем у активного контент.

вот реализация примерно такая же как в вашем примере - https://codepen.io/anon/pen/KQqBEB

[Игорь]

Zombie42679, Огроменное вам спасибо!

[Игорь]

Zombie42679, А вы не подскажите как теперь сделать что бы при наличии 5 итемов открывалось снизу 1-4 под 1-4 а 5 под 5
Просто тут я не совсем понимаю как сделать логику что бы адаптив потом нормально работал

[Zombie42679]

Игорь, как вариант продублировать блоки и код, вообще лучше в вашем случае, чтоб и адаптив работал, внутри айтема сделать контент и по активному классу раскрывать его