Открывающиеся списки!
Добрый вечер! Ребята подскажите пожалуйста, как реализовать подобную функцию: При нажатии на первую ссылку. под ней открывается текст, а при нажатии на следующую, первая сворачивается, а это открывает под собой свой текст. Буду очень благодарен за помощь!
|
|
Круто! Но мне нужна реализация исключительно на Javascript, и предыдущая ссылка должна сворачиваться самостоятельно, в момент нажатия на следующую
|
Там 3 демо, во втором - такое поведение, как вам нужно.
Ну а если на js, то вы хоть разметку свою приведите. Как один из вариантов: помечать раскрытую ссылку классом, указывающий, что ссылка раскрыта. При клике на ссылку ищем ссылки с данным атрибутом, скрываем их текст, удаляем класс, у текущей ссылки открываем текст, добавляем класс. |
Да, это то что мне нужно! Мне бы пример кода посмотреть, как это реализованно в javascript
|
<style>
.visible {
display: block !important;
}
#accordion p {
display: none;
}
#accordion span {
cursor: pointer;
}
</style>
<div id="accordion">
<span class="opened">Ссылка 1</span>
<p class="visible">Текст по ссылке 1</p>
<br>
<span>Ссылка 2</span>
<p>Текст по ссылке 2</p>
<script>
(function() {
var accordion = document.getElementById('accordion');
accordion.onclick = function(e){
if (e.target.nodeName === 'SPAN') {
var opened = accordion.querySelectorAll('.opened');
for (var i = 0; i < opened.length; i++) {
opened[i].classList.remove('opened');
opened[i].nextElementSibling.classList.remove('visible');
}
e.target.classList.add('opened');
e.target.nextElementSibling.classList.add('visible');
}
}
})()
</script>
Как-то так. Только этот код не кроссбраузерный. Да и вообще, можно было бы и красивее сделать) |
| Часовой пояс GMT +3, время: 22:55. |