Якорные аккордеоны

Question

Ребят, привет. Подскажите, как реализовать открытие аккордеона через якорные ссылки? Пример тут. Самое главное, чтобы в url без перезагрузки также менялось значение якорной ссылки. Подскажите, как реализовать?

.content {
    display: none;
  }

<div class="block">
  <a href="#21">
    Заголовок
  </a>
  <p id="21" class="content">
    Содержимое 
  </p>
</div>

Answer 1

Вот так)

$(document).ready(function() {
  $('.accordion__trigger').click(function(event) {
    if ($('.accordion').hasClass('closeall')) {
      $('.accordion__trigger').not($(this)).removeClass('active');
      $('.accordion__content').not($(this).next()).slideUp(300);
    }
    $(this).toggleClass('active').next().slideToggle(300);
  });
});

.accordion__content {
  display: none;
}

<ul class="accordion closeall">
  <li class="accordion__item">
    <a href="#" class="accordion__trigger">
      <span>Аккордеон 1</span>
    </a>
    <div class="accordion__content">
      Lorem ipsum perspiciatis.
    </div>
  </li>
  <li class="accordion__item">
    <a href="#" class="accordion__trigger">
      <span>Аккордеон 2</span>
    </a>
    <div class="accordion__content">
      Lorem ipsum perspiciatis.
    </div>
  </li>
  <li class="accordion__item">
    <a href="#" class="accordion__trigger">
      <span>Аккордеон 3</span>
    </a>
    <div class="accordion__content">
      Lorem ipsum perspiciatis.
    </div>
  </li>
</ul>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

БЛОГ НА HUSL

Якорные аккордеоны

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