SanistRay
@SanistRay

Как пофиксить ошибку с отображением текста?

Здраствуйте. Вообщем, нужно было сделать подобие "Спойлера". Я через jQuery сделал с помощью добавления класса при клике. Но проблема в том, что при свертывании (втором клике) текст пропадает слишком поздно (из - за таймера, как я полагаю). Есть какие - то варианты для исправления данной проблемы, а то не могу придумать? А если нет, то как вообще лучше делать "спойлеры"?

Спасибо за помощь :)

Прилагаю код: https://jsfiddle.net/130fvtz5/
  • Вопрос задан
  • 71 просмотр
Решения вопроса 1
KorniloFF
@KorniloFF Куратор тега JavaScript
Работаю по font-end / JS
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
z80b
@z80b
Frontend
<style>
  body {
    background-color: #000;
  }

  .spoiler {
    background: #FF1469;
    border-radius: 10px;
    color: #fff;
  }

  .spoiler__title {
    display: block;
    font-size: 16px;
    padding: 10px;
    cursor: pointer;
  }

  .spoiler__body {
    max-height: 0;
    overflow: hidden;
    transition: 0.5s all ease;
  }

  .spoiler__text {
    font-size: 13px;
    padding: 0 10px 10px;
  }

  .spoiler__toggler {
    display: none;
  }

  .spoiler__toggler:checked + .spoiler__body {
    max-height: 100px;
  }
</style>
<div class="spoiler">
  <label class="spoiler__title" for="spoiler-01">Title</label>
  <input id="spoiler-01" type="checkbox" class="spoiler__toggler"/>
  <div class="spoiler__body">
    <div class="spoiler__text">
      Description Description Description Description  Description
      Description  Description  Description  Description  Description
      Description  Description  Description  Description  Description
      Description
    </div>
  </div>
</div>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы