Есть такой код. Блоки открываются по очереди. Как сделать чтобы они закрывались в обратной очередности?
function display(el) {
$(el).next('.hidden__wrapper').fadeToggle(300, function(){
$(this).next().fadeToggle(300, arguments.callee);
})
}
.block {
cursor: pointer;
color: #fff;
width: 500px;
height: 50px;
background-color: #333;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
font-size: 20px;
}
.hidden {
width: 500px;
height: 50px;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
font-size: 20px;
}
.hidden-one {
background-color: darksalmon;
}
.hidden-two {
background-color: darkslategrey;
}
.hidden-three {
background-color: darkolivegreen;
}
.hidden__wrapper {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div onclick="display(this)" class="block">Раскрыть</div>
<div class="hidden__wrapper">
<div class="hidden hidden-one">One</div>
</div>
<div class="hidden__wrapper">
<div class="hidden hidden-two">Two</div>
</div>
<div class="hidden__wrapper">
<div class="hidden hidden-three">Three</div>
</div>
</div>