как сделать чтобы блоки в мобильной версии немного прятались друг под друга, а при клике на них показывались полностью?

Question

Фото как должно прятаться друг под друга приложил, а когда нажимаем на любое место карт, то они должны развернуться в полную версию, то есть чтобы их было полностью видно, а при нажатии еще раз - снова сворачиваться

#row_main{
    width: 85%;
    margin-left: 7%;
    margin-right: 5%;
   }
   
#balance{
background-image: linear-gradient(to right top, #000000 90%, rgb(211, 106, 8) 90%);
border-radius: 1px;
border-radius: 3px;
border: 1px solid #aaaaaa;
/* margin-right: 10px; */
/* margin-left: 10%; */
/* max-width: 20%; */

}
#balance p{
    color: #e0e0e0;
    font-size: 23px;
    font-family: 'Montserrat', sans-serif;
} 
#escrow{
    background-image: linear-gradient(to right top, #000000 90%, rgb(4, 113, 214) 90%);
    border: 1px solid #aaaaaa;   
     color: #e0e0e0;
    font-size: 23px;
    font-family: 'Montserrat', sans-serif;
    border-radius: 3px;
    /* margin-right: 10px; */
    /* max-width: 20%; */

}
#close{
    background-image: linear-gradient(to right top, #000000 90%, rgb(11, 214, 4) 90%);
    border: 1px solid #aaaaaa;    
    color: #e0e0e0;
    font-size: 23px;
    font-family: 'Montserrat', sans-serif;
    border-radius: 3px;
    /* margin-right: 10px; */
    /* max-width: 20%; */

}
#get_base{
    background-image: linear-gradient(to right top, #000000 90%, rgb(214, 4, 67) 90%);
    border: 1px solid #aaaaaa;
    color: #e0e0e0;
    font-size: 23px;
    font-family: 'Montserrat', sans-serif;
    border-radius: 3px;
    /* max-width: 20%; */
}

<div class="row" id="row_main">
    <div class="col-md-3" id="balance">
         <p >Баланс |
<button id="toggle" onclick="myFunction()" style="
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none;
    cursor:pointer;
    overflow: hidden;
    outline:none;
    color: #e0e0e0;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;">UUU</button>
         </p>
         <p align="center">{}</p>
         <hr style=" background: rgb(180, 180, 180);">
         <p align="center">{} <span> | за сегодня</span></p>
    </div>

    <div class="col-md-3" id="escrow">
        <p>Заморожено |<span> UUU </span></p>
        <p align="center">{}</p>
         <hr style=" background: rgb(180, 180, 180);">
         <p align="center">{} <span> | за сегодня</span></p>
    </div>

    <div class="col-md-3" id="close">
        <p>Закрытых заявок</p>
        <p align="center">{}</p>
         <hr style=" background: rgb(180, 180, 180);">
         <p align="center">{} <span> | за сегодня</span></p>
    </div>

    <div class="col-md-3" id="get_base">
        <p>Получено |<span> UUU</span></p>
        <p align="center">{}</p>
         <hr style=" background: rgb(180, 180, 180);">
         <p align="center">{} <span> | за сегодня</span></p>
    </div>
</div>

Answer 1

Один из способов. Кажется достаточно простым, т.к. карточкам не требуются индивидуальные стили, и их количество может быть любым.

.container {
  width:300px;
  display:flex;
  flex-direction:column-reverse;
}
.card {
  min-height:100px;
  border: solid 1px gray;
  border-radius: 1em;
  margin-bottom:-80px;
  background: white;
  display: flex;
  align-items: flex-end;
  padding: 0 1em;
  transition: margin-bottom 0.5s;
}
.active > .card {
  margin-bottom: 1em;
}

<div class="container" onclick="this.classList.toggle('active')">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
  <div class="card">4</div>
  <div class="card">5</div>
<div>

БЛОГ НА HUSL

как сделать чтобы блоки в мобильной версии немного прятались друг под друга, а при клике на них показывались полностью?

Ответы (1 шт):