Как сделать развертывание

Question

можете подсказать как сделать развертывание плавное при клике на кнопку

<div class="glaz">
      <div class="container">
        <h2 class="glaz__title">
          <span class="glaz__title-blue">Варианты остекления</span> балконов с
          расчетом стоимости
        </h2>
        <div class="glaz__blocks">
          <div class="glaz__block">
            <h3 class="glaz__block-title">
              Теплое остекление балкона с отделкой пластиком
            </h3>
            <div class="glaz__block-image">
              <img src="img/glaz-image.png" alt="image: glaz" />
            </div>
            <div class="glaz__block-prices">
              <div class="glaz__block-price">
                <span class="glaz__block-price__text">Теплое остекление:</span>
                <span class="glaz__block-price__price">12 232 руб.</span>
              </div>
              <div class="glaz__block-price">
                <span class="glaz__block-price__text">Отделка стен:</span>
                <span class="glaz__block-price__price">12 232 руб.</span>
              </div>
              <div class="glaz__block-price">
                <span class="glaz__block-price__text">Отделка потолка:</span>
                <span class="glaz__block-price__price">12 232 руб.</span>
              </div>
              <div class="glaz__block-price">
                <span class="glaz__block-price__text">Отделка стен:</span>
                <span class="glaz__block-price__price">12 232 руб.</span>
              </div>
            </div>
            <span class="glaz__line"></span>
            <div class="glaz__block-price">
              <span class="glaz__block-price__text">Цена от:</span>
              <span class="glaz__block-price__price-full">40 320 руб</span>
            </div>
            <button class="button glaz__block-button">
              Подробнее <span class="glaz__block-button-hover">&#8250;</span>
            </button>
          </div>
          <div class="glaz__block">
            <h3 class="glaz__block-title">
              Теплое остекление балкона с отделкой пластиком
            </h3>
            <div class="glaz__block-image">
              <img src="img/glaz-image.png" alt="image: glaz" />
            </div>
            <div class="glaz__block-prices">
              <div class="glaz__block-price">
                <span class="glaz__block-price__text">Теплое остекление:</span>
                <span class="glaz__block-price__price">12 232 руб.</span>
              </div>
              <div class="glaz__block-price">
                <span class="glaz__block-price__text">Отделка стен:</span>
                <span class="glaz__block-price__price">12 232 руб.</span>
              </div>
              <div class="glaz__block-price">
                <span class="glaz__block-price__text">Отделка потолка:</span>
                <span class="glaz__block-price__price">12 232 руб.</span>
              </div>
              <div class="glaz__block-price">
                <span class="glaz__block-price__text">Отделка стен:</span>
                <span class="glaz__block-price__price">12 232 руб.</span>
              </div>
            </div>
            <span class="glaz__line"></span>
            <div class="glaz__block-price">
              <span class="glaz__block-price__text">Цена от:</span>
              <span class="glaz__block-price__price-full">40 320 руб</span>
            </div>
            <button class="button glaz__block-button">
              Подробнее <span class="glaz__block-button-hover">&#8250;</span>
            </button>
          </div>
          <div class="glaz__block">
            <h3 class="glaz__block-title">
              Теплое остекление балкона с отделкой пластиком
            </h3>
            <div class="glaz__block-image">
              <img src="img/glaz-image.png" alt="image: glaz" />
            </div>
            <div class="glaz__block-prices">
              <div class="glaz__block-price">
                <span class="glaz__block-price__text">Теплое остекление:</span>
                <span class="glaz__block-price__price">12 232 руб.</span>
              </div>
              <div class="glaz__block-price">
                <span class="glaz__block-price__text">Отделка стен:</span>
                <span class="glaz__block-price__price">12 232 руб.</span>
              </div>
              <div class="glaz__block-price">
                <span class="glaz__block-price__text">Отделка потолка:</span>
                <span class="glaz__block-price__price">12 232 руб.</span>
              </div>
              <div class="glaz__block-price">
                <span class="glaz__block-price__text">Отделка стен:</span>
                <span class="glaz__block-price__price">12 232 руб.</span>
              </div>
            </div>
            <span class="glaz__line"></span>
            <div class="glaz__block-price">
              <span class="glaz__block-price__text">Цена от:</span>
              <span class="glaz__block-price__price-full">40 320 руб</span>
            </div>
            <button class="button glaz__block-button">
              Подробнее <span class="glaz__block-button-hover">&#8250;</span>
            </button>
          </div>
          <div class="glaz__block">
            <h3 class="glaz__block-title">
              Теплое остекление балкона с отделкой пластиком
            </h3>
            <div class="glaz__block-image">
              <img src="img/glaz-image.png" alt="image: glaz" />
            </div>
            <div class="glaz__block-prices">
              <div class="glaz__block-price">
                <span class="glaz__block-price__text">Теплое остекление:</span>
                <span class="glaz__block-price__price">12 232 руб.</span>
              </div>
              <div class="glaz__block-price">
                <span class="glaz__block-price__text">Отделка стен:</span>
                <span class="glaz__block-price__price">12 232 руб.</span>
              </div>
              <div class="glaz__block-price">
                <span class="glaz__block-price__text">Отделка потолка:</span>
                <span class="glaz__block-price__price">12 232 руб.</span>
              </div>
              <div class="glaz__block-price">
                <span class="glaz__block-price__text">Отделка стен:</span>
                <span class="glaz__block-price__price">12 232 руб.</span>
              </div>
            </div>
            <span class="glaz__line"></span>
            <div class="glaz__block-price">
              <span class="glaz__block-price__text">Цена от:</span>
              <span class="glaz__block-price__price-full">40 320 руб</span>
            </div>
            <button class="button glaz__block-button">
              Подробнее <span class="glaz__block-button-hover">&#8250;</span>
            </button>
          </div>
          <button class="glaz__block-button-more">Показать больше</button>
        </div>
      </div>
      <!-- /.container -->
    </div>
    <!-- /.glaz -->

Два нижних блока с теплой отделкой скрыты, при клике они плавно появляются

Я хотел сделать на js, но не очень представляю как)

Answer 1

Если я вас правильно понял:

// Select all menu items with a nested ul
$subMenus = $('#my-menu li ul');
// Hide Sub Menus
$subMenus.hide();
// Attach event listener to list items with a menu
$($subMenus).parent().children('a').on('click', function(event) {
  event.preventDefault();
  $(this).next().slideToggle(200);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="my-menu">
  <li><a href="#">Варианты остекления<br> балконов с
          расчетом стоимости</a>
    <ul>
      <li><a href="#">Теплое остекление балкона с отделкой пластиком</a>
        <ul>
          <li>Цена</li>
          <li>Цена</li>
        </ul>
      </li>
      <li><a href="#">Теплое остекление балкона с отделкой пластиком</a>
        <ul>
          <li>Цена</li>
          <li>Цена</li>
        </ul>
      </li>
      <li><a href="#">Теплое остекление балкона с отделкой пластиком</a>
        <ul>
          <li>Цена</li>
          <li>Цена</li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Теплое остекление балкона <br> с отделкой пластиком</a>
    <ul>
      <li>Цена</li>
      <li>Цена</li>
      <li>Цена</li>
    </ul>
  </li>
</ul>

БЛОГ НА HUSL

Как сделать развертывание

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