<!-- 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 -->var animationTime = 2000;
$(".wp-block-details > summary").click(function() {
$(this).next().stop(true, true).slideToggle(animationTime);
});<!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>
Простой