Как сделать анимированную кнопку «Подробнее»?

Question

[Миржалол Мирхомитов]

Работаю над этим сайтом: https://texnomart.uz/
На странице
https://texnomart.uz/ru/katalog/tehnika-dlya-ofisa
Делаю кнопку "Подробнее" потому что там будет много информации.
Написал скрипт похожий на это со стилями: https://jsfiddle.net/Mirjalol97/csw4L6vh/31/
Проблема в том что при нажатии на кнопку "Скрыть "

Происходит торможение, сперва меняется текст а потом скрывается.
Как можно реализовать так что бы все было сразу без торможении?

Answer 1

[mikeyuriev]

const content = document.querySelector('.content'),
         contentHeight = document.querySelector('.content').clientHeight,
         contentBtn = document.querySelector('.content-btn');
     
if(contentHeight > 50) {
  content.classList.add('content-hide')
  contentBtn.style.display = "block"
} else {
  contentBtn.style.display = "none"
}

contentBtn.addEventListener('click', function() {
  content.classList.toggle('content-show')
})

content.addEventListener('transitionend', function() {
  contentBtn.textContent = contentBtn.textContent === 'Подробнее' ? 'Скрыть' : 'Подробнее'
})

console.log(content)

Comments

[Миржалол Мирхомитов]

Отличный вариант. Но все равно чуть чуть ест торможение).

[Marduh-Web]

Михаил Миронов, дело вtransition: max-height 1s ease-in-out; у .catalog-description .catalog-description__content

[mikeyuriev]

Тогда можно так:

css:

.content {
  overflow: hidden;
  transition: height 1s ease;
}

js:

const content = document.querySelector('.content'),
  contentBtn = document.querySelector('.content-btn')
     
if (content.clientHeight > 50) {
  content.style.height = '50px'
  contentBtn.style.display = "block"
} else {
  contentBtn.style.display = "none"
}

contentBtn.addEventListener('click', function() {
  if (content.style.height === '50px') {
    content.style.height = `${content.scrollHeight}px`
  } else {
    content.style.height = '50px'
  }
})

content.addEventListener('transitionend', function() {
  contentBtn.textContent = content.clientHeight > 50 ? 'Скрыть' : 'Подробнее'
})

Answer 2

[Валерий Литвинов]

На сайте подключён bootstrap, пробовал использовать данный компонент? https://bootstrap-4.ru/docs/4.5/components/collapse/

Comments

[Миржалол Мирхомитов]

Спасибо за ответ. Но это не то что я искал)