Задать вопрос
spacemakerman
@spacemakerman

Как плавно открыть аккордеон?

Есть такой аккордеон:
<!-- wp:details {"summary":"Детали:"} -->
<details class="wp-block-details">
  <summary>Детали:</summary><!-- wp:list {"fontSize":"small"} -->
  <ul class="has-small-font-size">
    <!-- wp:list-item -->
    <li>Пример текста</li>
    <li>Пример текста</li>
    <li>Пример текста</li>
    <li>Пример текста</li>
    <li>Пример текста</li>
    <!-- /wp:list-item -->


JS + jQuery:
var animationTime = 2000;

$(".wp-block-details > summary").click(function() {

  $(this).next().stop(true, true).slideToggle(animationTime);

});


в данном случае почему-то быстро открывается и плавно закрывается.
  • Вопрос задан
  • 116 просмотров
Подписаться 1 Средний Комментировать
Решения вопроса 1
spacemakerman
@spacemakerman Автор вопроса
Решение найдено здесь

<!DOCTYPE html>
<html>
  <head>
    <title>Example of smooth opening of an accordion using jQuery</title>
    <style>
      body {
        background-color: #1b1b1b;
        color: #ccc;
      }
    </style>
  </head>
  <body>
    <details>
      <summary>Details:</summary>
      <ul>
        <li>Content</li>
        <li>Content</li>
        <li>Content</li>
        <li>Content</li>
        <li>Content</li>
        <li>Content</li>
      </ul>
    </details>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
$('details summary').each(function() {
	var animationTime = 1000; 
   var $Wrapper = $(this).nextAll().wrapAll('<div></div>').parent();
   // Hide elements that are not open by default
   if(!$(this).parent('details').attr('open'))
      $Wrapper.hide();
   $(this).click(function(Event) {
      Event.preventDefault();
      if($(this).parent('details').attr('open')) {
         $Wrapper.slideUp(animationTime, function() {
            // Remove the open attribute after sliding so, so the animation is visible in browsers supporting the <details> element
            $(this).parent('details').removeAttr('open');
         });
      } else {
         // Add the open attribute before sliding down, so the animation is visible in browsers supporting the <details> element
         $(this).parent('details').attr('open', true);
         $Wrapper.slideDown(animationTime);
      }
   });
});
    </script>
  </body>
</html>
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
godsplan
@godsplan
const details = document.querySelector('details')

details.addEventListener('click', (e)=> {
  e.preventDefault()
  //....rest code
})
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы