Как сделать плавный спойлер?
Добрый вечер!
Подскажите пожалуйста, как можно из этого кода сделать:
1) Плавное открытие и закрытие.
2) После закрытия чтоб страница поднималась вместе с закрывающемся спойлером до начала его открытия.
Или есть варианты на JS?
<div class="ba-testimonial__body"> Спойлер — это раскрытие интриги, влияющее на восприятие сюжета книги или фильма. </br> <div class="ba-testimonial__more" id="timore01"> Например, в детективах спойлером является имя убийцы. Чтобы не портить удовольствие от предстоящего чтения или просмотра фильма, текст спойлера прячут, оставляя возможность его просмотреть тем, кто хочет узнать подробности сюжета. </div> <button class="ba-extra-text ba-testimonial__toggle" onclick="document.getElementById('timore01').classList.toggle('open')" aria-label="Читать далее" data-more-text="Читать далее" data-less-text="Свернуть"></button> </div> |
<div class="ba-testimonial__body"> Спойлер — это раскрытие интриги, влияющее на восприятие сюжета книги или фильма. </br> <div class="ba-testimonial__more" id="timore01"> Например, в детективах спойлером является имя убийцы. Чтобы не портить удовольствие от предстоящего чтения или просмотра фильма, текст спойлера прячут, оставляя возможность его просмотреть тем, кто хочет узнать подробности сюжета. </div> <button class="ba-extra-text ba-testimonial__toggle" onclick="document.getElementById('timore01').classList.toggle('open')" aria-label="Читать далее" data-more-text="Читать далее" data-less-text="Свернуть"></button> </div>
.ba-testimonial p { margin-bottom: 16px } .ba-testimonial__body>:last-child { margin-bottom: 0 } .ba-testimonial__toggle { color: var(--color); font-size: 14px } .ba-testimonial__toggle:hover { color: var(--color); text-shadow: 0 0 5px } .ba-testimonial__toggle:before { content: attr(data-more-text) } .open+.ba-testimonial__toggle:before { content: attr(data-less-text) } .ba-testimonial__more { display: none; margin-bottom: 0px } .ba-testimonial__more.open { display: block } .ba-testimonial__more>:last-child { margin-bottom: 0 } |
.ba-testimonial p { margin-bottom: 16px } .ba-testimonial__body>:last-child { margin-bottom: 0 } .ba-testimonial__toggle { color: var(--color); font-size: 14px } .ba-testimonial__toggle:hover { color: var(--color); text-shadow: 0 0 5px } .ba-testimonial__toggle:before { content: attr(data-more-text) } .open+.ba-testimonial__toggle:before { content: attr(data-less-text) } .ba-testimonial__more { display: none; margin-bottom: 0px } .ba-testimonial__more.open { display: block } .ba-testimonial__more>:last-child { margin-bottom: 0 }
Дополнительно:
https://codepen.io/kapysta-xxl/pen/XWOMYZK
для скролла используй scrollIntoView
https://yandex.ru/search/?text=javascript+spoiler
https://yandex.ru/search/?text=javascript+accordion
На barba.js почему-то не хочет работать, если кто сможет разобраться и помочь, буду очень благодарен!
Демо:
https://jsfiddle.net/0czftjm3/2/
<div id="content"> <div class="spoiler"> Спойлер — это раскрытие интриги, влияющее на восприятие сюжета книги или фильма. <div class="spoiler-btn spoiler-btn-top"><span class="show"></span><span class="hide"></span></div> <div class="spoiler-body"> Например, в детективах спойлером является имя убийцы. Чтобы не портить удовольствие от предстоящего чтения или просмотра фильма, текст спойлера прячут, оставляя возможность его просмотреть тем, кто хочет узнать подробности сюжета. </div> <div class="spoiler-btn spoiler-btn-bottom"><span class="show">Читать далее</span><span class="hide">Свернуть</span></div> </div> </div> |
<div id="content"> <div class="spoiler"> Спойлер — это раскрытие интриги, влияющее на восприятие сюжета книги или фильма. <div class="spoiler-btn spoiler-btn-top"><span class="show"></span><span class="hide"></span></div> <div class="spoiler-body"> Например, в детективах спойлером является имя убийцы. Чтобы не портить удовольствие от предстоящего чтения или просмотра фильма, текст спойлера прячут, оставляя возможность его просмотреть тем, кто хочет узнать подробности сюжета. </div> <div class="spoiler-btn spoiler-btn-bottom"><span class="show">Читать далее</span><span class="hide">Свернуть</span></div> </div> </div>
.spoiler-btn { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .spoiler-btn:hover { color: #e00; } .spoiler-btn-bottom { width: 100%; text-align: left; } .spoiler-body { display: none; } .spoiler .show, .spoiler.expanded .hide { display: inline; } .spoiler .hide, .spoiler.expanded .show { display: none; } .spoiler.simple .spoiler-btn { width: 100%; } .spoiler.simple .spoiler-btn-bottom { display: none; } .spoiler.simple.expanded .spoiler-btn-bottom { display: block; } #content { width: 100%; } |
.spoiler-btn { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .spoiler-btn:hover { color: #e00; } .spoiler-btn-bottom { width: 100%; text-align: left; } .spoiler-body { display: none; } .spoiler .show, .spoiler.expanded .hide { display: inline; } .spoiler .hide, .spoiler.expanded .show { display: none; } .spoiler.simple .spoiler-btn { width: 100%; } .spoiler.simple .spoiler-btn-bottom { display: none; } .spoiler.simple.expanded .spoiler-btn-bottom { display: block; } #content { width: 100%; }
function toggleSpoilerAnimated(spoilerElement, isInvertedCollapse, isInvertedExpand, duration=500) { let spoilerBody = spoilerElement.querySelector('.spoiler-body'); let isCollapsing = spoilerElement.classList.contains('expanded'); let heightBefore = spoilerElement.offsetHeight; let offsetBefore = window.pageYOffset; spoilerElement.classList.toggle('expanded', !isCollapsing); let isScrollRequired = ( isCollapsing && isInvertedCollapse) || (!isCollapsing && isInvertedExpand ); let scrollFunc = (isScrollRequired) ? () => { let heightNow = spoilerElement.offsetHeight; let heightDelta = heightNow - heightBefore; window.scrollTo(0, offsetBefore + heightDelta); } : undefined; $(spoilerBody).slideToggle({ duration: duration, progress: scrollFunc, complete: scrollFunc }); } for (let el of document.querySelectorAll('.spoiler-btn-top')) { el.addEventListener('click', e => toggleSpoilerAnimated(el.parentNode, true)); } for (let el of document.querySelectorAll('.spoiler-btn-bottom')) { el.addEventListener('click', e => toggleSpoilerAnimated(el.parentNode, true)); } |
function toggleSpoilerAnimated(spoilerElement, isInvertedCollapse, isInvertedExpand, duration=500) { let spoilerBody = spoilerElement.querySelector('.spoiler-body'); let isCollapsing = spoilerElement.classList.contains('expanded'); let heightBefore = spoilerElement.offsetHeight; let offsetBefore = window.pageYOffset; spoilerElement.classList.toggle('expanded', !isCollapsing); let isScrollRequired = ( isCollapsing && isInvertedCollapse) || (!isCollapsing && isInvertedExpand ); let scrollFunc = (isScrollRequired) ? () => { let heightNow = spoilerElement.offsetHeight; let heightDelta = heightNow - heightBefore; window.scrollTo(0, offsetBefore + heightDelta); } : undefined; $(spoilerBody).slideToggle({ duration: duration, progress: scrollFunc, complete: scrollFunc }); } for (let el of document.querySelectorAll('.spoiler-btn-top')) { el.addEventListener('click', e => toggleSpoilerAnimated(el.parentNode, true)); } for (let el of document.querySelectorAll('.spoiler-btn-bottom')) { el.addEventListener('click', e => toggleSpoilerAnimated(el.parentNode, true)); }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания плавного спойлера на веб-странице можно использовать JavaScript и CSS. Вот пример кода, который демонстрирует, как это можно сделать:
HTML:
```html
Содержимое спойлера здесь
```
CSS:
```css
.spoiler {
display: none;
transition: all 0.3s ease;
}
.spoiler-btn {
cursor: pointer;
}
```
JavaScript:
```javascript
document.querySelector('.spoiler-btn').addEventListener('click', function() {
var spoiler = document.querySelector('.spoiler');
if (spoiler.style.display === 'none') {
spoiler.style.display = 'block';
this.textContent = 'Скрыть спойлер';
} else {
spoiler.style.display = 'none';
this.textContent = 'Показать спойлер';
}
});
```
Этот код создает кнопку "Показать спойлер" и скрытый блок с содержимым спойлера. При нажатии на кнопку блок будет появляться плавно, благодаря использованию свойства `transition` в CSS. При повторном нажатии на кнопку блок будет скрываться снова.
Вы можете изменить содержимое спойлера и стилизацию по своему усмотрению, чтобы адаптировать его под ваши потребности.