How to fix the error with displaying text?

  • 0
    Hello. In general, it was necessary to make a kind of "Spoiler". I via jQuery did by adding class on click. But the problem is that on collapsing (second click), the text disappears too late (due to the timer, I suppose). Are there any options to fix this problem, otherwise I can't think of it? And if not, what is the best way to make "spoilers"?

    Thanks for the help :)

    I am attaching the code: https://jsfiddle.net/130fvtz5/
    JavaScript Annabelle Bishop, May 20, 2019

  • 3 Answers
  • 0
    Anonymous

  • 0
    <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>
    Anonymous

  • 0

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!