Сворачивание и разворачивание окна

Рейтинг: 0Ответов: 0Опубликовано: 16.05.2023

У меня есть плашка Вот код плашки (таких плашек всего 12):

<div class="plashki__item1">
  <div class="image4">
    <img src="img/spela2.png" alt="">
    <p href="http://dbmast.ru/" class="corner"><span> </span> Текст&nbsp;ленточки</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>

И в общем надо в эту плашку вставить кнопку по нажатию на которую должно выдвигаться выпадающее окно (как показано на скрине) и при этом чтобы нижняя плашка отодвигалась вниз. То есть надо сделать что-то типа аккордеона. введите сюда описание изображения

Ответы

Ответов пока нет.