Как сдлеать плавное скрите елмента?

Question

[Bogdan Buchko]

У меня есть аккордеон на чистом css. Как мне сделать плавное открытые текста в аккордеоне?
html:

<div class="deteils">
                <div class="deteils-item">
                    <input class="deteils-input" type="checkbox" id="deteils-1">
                    <label class="deteils-title" for="deteils-1">Lorem Ipsum:</label>
                    <div class="deteils-desc">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    </div>
                </div>
                <div class="deteils-item">
                    <input class="deteils-input" type="checkbox" id="deteils-2">
                    <label class="deteils-title" for="deteils-2">Lorem Ipsum:</label>
                    <div class="deteils-desc">
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                    </div>
                </div>
            </div>

css:

.deteils {
    text-align: left;
    margin-bottom: 20px;
}

.deteils-item {
    position: relative;
    border: 3px solid rgba(251, 20, 20, 0.459);
    border-radius: 16px;
    margin-bottom: 1vh;
}

.deteils-input {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.deteils-title {
    display: block;
    cursor: pointer;
    padding: 10px 15px;
}

.deteils-desc {
    border-top: none;
    display: none;
    font-size: 16px;
    padding: 10px 15px;
}

.deteils-input:checked ~ .deteils-desc {
    transition: all 2s;
    display: block;
}

P.S. Можно и на jQuery, хотя это уже нужно будет все поносить на jQuery

Answer 1

[Владимир]

Например через свойство max-height, задав закрытому элементу max-height: 0, а открытому предположительно-максимальную высоту (но в этом и проблема, что мы не можем размещать контент любой высоты)

https://codepen.io/kalatushki/pen/XWEJpXz

На jQuery — https://codepen.io/kalatushki/pen/vYREgyM