Сворачивание и разворачивание окна
У меня есть плашка Вот код плашки (таких плашек всего 12):
<div class="plashki__item1">
<div class="image4">
<img src="img/spela2.png" alt="">
<p href="http://dbmast.ru/" class="corner"><span> </span> Текст ленточки</p>
<div class="numberCircle">7</div>
</div>
<div class="title">Spela casino</div>
<ul class="ul1">
<li class="li1">first</li>
<li class="li1">second</li>
<li class="li1">three</li>
</ul>
<div class="bonus">
<p class="welcome">Welcome Package</p>
<p class="price">100% Up to 4000 EUR + 100 Free spins</p>
</div>
<div class="">
<a href="#" class="button">Visit Casino</a>
<a href="#" class="link">Stars casino review.</a>
</div>
</div>
Код выпадающего окна (то есть это то что должно выпадать по нажатию на кнопку)
<div class="drop-down-window">
<h3 class="title_window">Casino details</h3>
<table>
<tr>
<td>Launched</td>
<td>May, 2022</td>
</tr>
<td>
License
</td>
<td>Curacao</td>
</td>
<tr>
<td>Crupto</td>
<td class="td"></td>
</tr>
<tr>
<td>Crupto</td>
<td class="td"></td>
</tr>
<tr>
<td>Crupto</td>
<td class="td1"></td>
</tr>
<tr>
<td>Accepting geos</td>
<td>AU DE</td>
</tr>
</table>
<div class="part2">
<h3 class="title_window">Casino overiew</h3>
<div class="textCasino">Hyppää mukaan Spinni kasinon pyörteisiin ja nappaa pyöritykseen itsellesi mukaan jopa 3000
euroas bonusrahaa sekä 100
ilmaskierrosta. Nauti tästä bonuksesta kattavan pelivalikoiman lomassa ja kotiuta saamasi voitot ennätysvauhtia
Spinni
kasinolta! Lähde pelaamaan ilman rekisteröitymistä ja nauti toimivasta pelikokemuksesta!</div>
</div>
<!-- Платёжные логотипы -->
<div class="logo_pay">
<div class="div_logo_pay" style="background:#f70000;">
<img class="logo_img_pay" src="https://64keto6aov8.b-cdn.net/img/d3666e8e-e6c6-4ec8-ac7b-db57bc8511ff.png">
</div>
<div class="div_logo_pay" style="background:#1332c5;">
<img class="logo_img_pay" src="https://64keto6aov8.b-cdn.net/img/42b15471-e338-4cc1-89f0-158257c17bbf.png">
</div>
<div class="div_logo_pay" style="background:#d1d0cf;">
<img class="logo_img_pay" src="https://64keto6aov8.b-cdn.net/img/39e51a07-1f87-401c-bd84-5d899760339d.png">
</div>
<div class="div_logo_pay" style="background:#ef8e19;">
<img class="logo_img_pay" src="https://64keto6aov8.b-cdn.net/img/97e6b4fd-04e5-4160-85b3-dd816acd9867.png">
</div>
<div class="div_logo_pay" style="background:#bfc2c2;">
<img class="logo_img_pay" src="https://64keto6aov8.b-cdn.net/img/6b9c1c88-8197-474f-b4c0-eb897b0a1b5f.png">
</div>
<div class="div_logo_pay" style="background:#325a98;">
<img class="logo_img_pay" src="https://64keto6aov8.b-cdn.net/img/06333c36-2a88-48db-8066-ff3d5aeab44c.png">
</div>
<div class="div_logo_pay" style="background:#008e8e;">
<img class="logo_img_pay" src="https://64keto6aov8.b-cdn.net/img/485b05d7-763a-4529-aa76-09e78e2b4ec5.png">
</div>
</div>
<div class="part3">
<h3 class="title_window">Welcome bonus</h3>
<ul class="ul_plashki">
<li>First deposit bonus - 100%</li>
<li>Amount - ap to 1000 EUR</li>
<li>Free spins - 150 FS</li>
<li>Max bet - 5 EUR</li>
<li>Wager - x40</li>
<li>Min deposit - 20eur</li>
</ul>
</div>
</div>
</div>
</span>
И в общем надо в эту плашку вставить кнопку по нажатию на которую должно выдвигаться выпадающее окно (как показано на скрине) и при этом чтобы нижняя плашка отодвигалась вниз. То есть надо сделать что-то типа аккордеона.
Источник: Stack Overflow на русском