Открывающиеся списки!
Добрый вечер! Ребята подскажите пожалуйста, как реализовать подобную функцию: При нажатии на первую ссылку. под ней открывается текст, а при нажатии на следующую, первая сворачивается, а это открывает под собой свой текст. Буду очень благодарен за помощь!
|
|
Круто! Но мне нужна реализация исключительно на 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, время: 15:07. |