JSFiddle - React, Tailwind, and code Playground

by ruisoftware

HTML

/* make a blog entry about this.

First, explain how to show anwsers with CSS only.
Explain that height transitions will not work, unless we specify heights for each answers (but only for static content).
Explain the use of max-height instead.

Secondly, explain to show and HIDE the answer by toogling on the question again */
<dl>
    <dt tabindex=0>Question 1</dt>
    <dd>Answer 1</dd>
    
    <dt tabindex=1>Question 2</dt>
    <dd>Answer 2<br />still answer 2<br />Answer 2<br />still answer 2Answer 2<br />still answer 2Answer 2<br />still answer 2Answer 2<br />still answer 2Answer 2<br />still answer 2</dd>

    <dt tabindex=2>Question 3</dt>
    <dd>Answer 3</dd>
</dl>

CSS

dt {
    margin-top: 10px;
    font-weight: bold;
    outline: 0;
    cursor: pointer;
}

dd {
    max-height: 0; /* was height: 0; */
    overflow: hidden;
    transition: max-height .25s; /* was transition: height .25s;*/
    position: relative;
    margin: 0;
    padding-left: 1em;
}

dt:focus + dd {
    max-height: 5555px; /* was height: 50px; */
    top: -1em;
    padding-top: 1em;

}