Как сделать раздвигающееся меню?

Question

[Brendan Castaneda]

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

Я искал примеры но, что-то ни одного похожего.
Есть идеи? Или примеры? Верстать за меня не нужно.
Может jQuery библиотека есть какая?

Answer 1

[Brendan Castaneda]

На JS я всё это сделал.
Сделал фиксированную высоту в PX боксу с контентом.
И при клике на кнопку добавляю 100% высоты и обратно сворачиваю при клике.

Comments

[FrelFrloich]

ровно 6 строчек js.

[Brendan Castaneda]

FrelFrloich, Я вот так вот сделал.
Накидайте пример о котором вы говорите интересно взглянуть

$(() => {
    let button = doc.querySelector('.template_desc-box-2__details--learn') // Кнопка
    let box = doc.querySelector('.template_desc-box-2__details--box') // Бокс списка
    let boxHeight = doc.querySelector('.template_desc-box-2__details--box').scrollHeight // Высота

    button.addEventListener('click', onclickList)

    function onclickList() {
        // Если элемент содержит класс
        if (button.classList.contains('gradient-list')) {
            button.classList.remove('gradient-list')
            box.style.height = '93px'
        } else {
            button.classList.add('gradient-list')
            box.style.height = `${boxHeight}px`
        }
    }
})

[FrelFrloich]

Brendan Castaneda,
Вы там решили аккордеон простой написать или зачатки Скайнет?

let button = doc.querySelector('.template_desc-box-2__details--learn') // Кнопка
    let box = doc.querySelector('.template_desc-box-2__details--box') // Бокс списка
     
    button?.addEventListener('click', (e) => {
        button.classList.toggle('active')
        box.classList.toggle('show')
    })

всего 6.

хотя, можно и за 5 если бокс сразу за кнопкой.

let button = doc.querySelector('.template_desc-box-2__details--learn') // Кнопка   
    button?.addEventListener('click', (e) => {
        button.classList.toggle('active')
        button.nextElementSibling.classList.toggle('show')
    })

можно за 4 если актив нам не нужен

let button = doc.querySelector('.template_desc-box-2__details--learn') // Кнопка   
    button?.addEventListener('click', (e) => {
        button.nextElementSibling.classList.toggle('show')
    })

[FrelFrloich]

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

let button = doc.querySelector('.template_desc-box-2__details--learn') // Кнопка
    let box = doc.querySelector('.template_desc-box-2__details--box') // Бокс списка
  
    let buttonText = button.textContent 
   
    button?.addEventListener('click', (e) => {
        button.textContent = button.textContent === 'скрыть' ? buttonText : 'скрыть'
        
        box.classList.toggle('show')
    })

[Brendan Castaneda]

FrelFrloich, Посмешили ))
Вы написал код на раскрытие элементов да он хорош!
Только туда нужно дописать условия как и у меня.
Если добавляется больше контента тогда нужно высчитать высоту бокса.
Это нужно для того, что-бы раскрытие и закрытие блока можно было сделать плавным.

[FrelFrloich]

Brendan Castaneda, Друг, не пытайся сделать в Js то что делается в css. зачем тебе высота? а если будет контент больше чем высота, будем дружно лезть в js и исправлять?) высоту в котнтент, паддинги для красоты и хорош, дальше открыли закрыли и тд. Подчёркиваю это просто акордиошка, не нужно выдумывать и усложнять.

button?.addEventListener('click', (e) => {

этой проверки хватит что бы не выдавать ошибочку, если элемента нет. Вот даже статейка тебе, радуйся, читай, наслаждайся.
https://developer.mozilla.org/ru/docs/Web/JavaScri...

[Brendan Castaneda]

FrelFrloich, Ок спасибо за чтиво, сейчас почитаю его.
А я в JS прописал условия-же, что он высчитывает высоту блока в котором лежит контенет.
Контент у нас лежит в свёрнутом виде почти! Остальное скрываем через overflow-y: hidden.
Т.е. зная цифры высоты блока с контентом elem.scrollHeight делаем из них пиксели PX box.style.height = `${boxHeight}px` и раскрываем блок на эту высоту.
А весь этот велосипед для того, что-бы он раскрывал и закрывал блок плавно.
transition: all .3s сработает и туда и обратно если будут использована одни и те-же единицы измерения.
Например проценты я не могу использовать там. Из за чего?
Допусти там поменяют наполнение контента и его станет больше, тогда в процентном ссотношении открытая часть блока либо увеличется, либо уменьшится. Поэтому только PX, по этому я не могу задать проценты. Например да-же те-же 100% в JS так как в блоке px. Тогда transition: all .3s не отработает уже )

Может конечно я ошибаюсь в чём-то.
Но саму часть кода можно сократить как вы уже написали это да, это верно.

P.S. скажите когда подключаешь jQuery плагин, там код на jQuery. Его как можно вставить?
Так что-бы это была анонимная отдельная функция?
Только в функцию для jQuery можно воткнуть?
$(() => { ...code });
Или как-то ещё? Я просто вставлял в (async() => { ...code }); и он не работал.

И вот ещё хотелось-бы узнать какой момент, для обычного нативного JS какие лучше всего использовать анонимные функции, что-бы не плодить глобальные переменные? Обернуть например какое-нибудь событие с переменными.