#0001 CSS Only Toggle

source: https://codepen.io/AdrianBece/pen/vYYrPzK

Try it

Code

the html

<div class="toggleable">
<input class="toggleable__control hidden--visually" id="toggleable1" type="checkbox" />
<label class="toggleable__label" for="toggleable1">
Toggleable
</label>

<div class="toggleable__content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
</div>
</div>

the css

.toggleable__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.8s cubic-bezier(0, 1, 0, 1);
}

.toggleable__control:checked ~ .toggleable__content {
    transition-timing-function: ease-in-out;
    max-height: 800px;
}

/* Hiding elements in an accessible way */
.hidden--visually {
    border: 0;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.toggleable {
    border-bottom: 2px solid lightgray;
}

.toggleable__label {
    display: block;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem 0;
    cursor: pointer;
}

.toggleable__content {
    margin-top: 1rem;
    padding: 0 2rem;
}

.toggleable__control:checked ~ .toggleable__content {
    margin-bottom: 1rem;
}

.toggleable__label::after {
    content: "▼";
    font-size: 0.8rem;
}

.toggleable__control:checked ~ .toggleable__label::after {
    content: "▲";
}