Как полностью скрыть блок c помощью max-height

Question

Задача сделать спойлер из которого плавно появляется контент но столкнулся с проблемой что при padding контент скрывается не полностью при max-height то есть padding не учитываются. Как решить?

к примеру спойлер

document.addEventListener("DOMContentLoaded", function() {
  const spoilers = document.querySelectorAll(".spoiler");
  spoilers.forEach(spoiler => {
    const btn = spoiler.querySelector(".spoiler-btn");
    const content = spoiler.querySelector(".spoiler-content");
    btn.addEventListener("click", function() {
      spoiler.classList.toggle("active");
    });
  });
});

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  padding-top: 100px;
}

.spoiler {
  margin: 0 auto;
  width: 500px;
}

.spoiler-content {
  padding: 10px;
  background: gray;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.spoiler.active .spoiler-content {
  max-height: 200px;
}

.spoiler-btn {
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

<div class="container">
  <div class="spoiler">
    <button class="spoiler-btn">Показать контент</button>
    <div class="spoiler-content">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis mollitia iste nemo neque placeat repudiandae consequuntur ratione ducimus saepe? Natus quia deserunt odit sequi. Exercitationem perferendis similique magnam quam modi.
      </p>
    </div>
  </div>
</div>

Answer 1

Или анимируйте padding вместе с max-height или имитируйте padding каким либо способом, например оберткой.

document.addEventListener("DOMContentLoaded", function() {
  const spoilers = document.querySelectorAll(".spoiler");
  spoilers.forEach(spoiler => {
    const btn = spoiler.querySelector(".spoiler-btn");
    const content = spoiler.querySelector(".spoiler-content");
    btn.addEventListener("click", function() {
      spoiler.classList.toggle("active");
    });
  });
});

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  padding-top: 100px;
}

.spoiler {
  margin: 0 auto;
  width: 500px;
}

.spoiler-content {
  padding: 0 10px;
  background: gray;
  max-height: 0;
  overflow: hidden;
  transition: 0.3s ease-out;
}

.spoiler.active .spoiler-content {
  padding: 10px;
  max-height: 200px;
}

.spoiler-btn {
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

<div class="container">
  <div class="spoiler">
    <button class="spoiler-btn">Показать контент</button>
    <div class="spoiler-content">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis mollitia iste nemo neque placeat repudiandae consequuntur ratione ducimus saepe? Natus quia deserunt odit sequi. Exercitationem perferendis similique magnam quam modi.
      </p>
    </div>
  </div>
</div>

Answer 2

Заверните spoiler-content в spoiler-wrapper и уберите всякие отступы у wrapper

Пример:

document.addEventListener("DOMContentLoaded", function() {
  const spoilers = document.querySelectorAll(".spoiler");
  spoilers.forEach(spoiler => {
    const btn = spoiler.querySelector(".spoiler-btn");
    const content = spoiler.querySelector(".spoiler-wrapper");
    btn.addEventListener("click", function() {
      spoiler.classList.toggle("active");
    });
  });
});

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  padding-top: 100px;
}

.spoiler {
  margin: 0 auto;
  width: 500px;
}

.spoiler-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.spoiler-content {
  padding: 10px;
  background: gray;
}

.spoiler.active .spoiler-wrapper {
  max-height: 200px;
}

.spoiler-btn {
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

<div class="container">
  <div class="spoiler">
    <button class="spoiler-btn">Показать контент</button>
    <div class="spoiler-wrapper">
      <div class="spoiler-content">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis mollitia iste nemo neque placeat repudiandae consequuntur ratione ducimus saepe? Natus quia deserunt odit sequi. Exercitationem perferendis similique magnam quam modi.
        </p>
      </div>
    </div>
  </div>
</div>

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

document.addEventListener("DOMContentLoaded", function() {
  const spoilers = document.querySelectorAll(".spoiler");
  spoilers.forEach(spoiler => {
    const btn = spoiler.querySelector(".spoiler-btn");
    const wrapper = spoiler.querySelector(".spoiler-wrapper");
    btn.addEventListener("click", function() {
      if (wrapper.classList.contains('active')) {
        wrapper.classList.remove("active");  
        wrapper.style.maxHeight = `0px`;
      } else {
        wrapper.classList.add("active");
        wrapper.style.maxHeight = `${wrapper.scrollHeight}px`;
      }
    });
  });
});

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  padding-top: 100px;
}

.spoiler {
  margin: 0 auto;
  width: 500px;
}

.spoiler-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.spoiler-content {
  padding: 10px;
  background: gray;
}

.spoiler-btn {
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

<div class="container">
  <div class="spoiler">
    <button class="spoiler-btn">Показать контент</button>
    <div class="spoiler-wrapper">
      <div class="spoiler-content">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis mollitia iste nemo neque placeat repudiandae consequuntur ratione ducimus saepe? Natus quia deserunt odit sequi. Exercitationem perferendis similique magnam quam modi.
        </p>
      </div>
    </div>
  </div>
  <div class="spoiler">
    <button class="spoiler-btn">Показать немного контента</button>
    <div class="spoiler-wrapper" style="min-height: 20px;">
      <div class="spoiler-content">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis mollitia iste nemo neque placeat repudiandae consequuntur ratione ducimus saepe? Natus quia deserunt odit sequi. Exercitationem perferendis similique magnam quam modi.
        </p>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как полностью скрыть блок c помощью max-height

Ответы (2 шт):