Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Открывающиеся списки! (https://javascript.ru/forum/dom-window/36829-otkryvayushhiesya-spiski.html)

Maks456 28.03.2013 18:31

Открывающиеся списки!
 
Добрый вечер! Ребята подскажите пожалуйста, как реализовать подобную функцию: При нажатии на первую ссылку. под ней открывается текст, а при нажатии на следующую, первая сворачивается, а это открывает под собой свой текст. Буду очень благодарен за помощь!

zilker 28.03.2013 18:37

http://tympanus.net/codrops/2012/02/...ion-with-css3/

Maks456 28.03.2013 18:44

Круто! Но мне нужна реализация исключительно на Javascript, и предыдущая ссылка должна сворачиваться самостоятельно, в момент нажатия на следующую

zilker 28.03.2013 18:53

Там 3 демо, во втором - такое поведение, как вам нужно.
Ну а если на js, то вы хоть разметку свою приведите.
Как один из вариантов: помечать раскрытую ссылку классом, указывающий, что ссылка раскрыта. При клике на ссылку ищем ссылки с данным атрибутом, скрываем их текст, удаляем класс, у текущей ссылки открываем текст, добавляем класс.

Maks456 28.03.2013 19:33

Да, это то что мне нужно! Мне бы пример кода посмотреть, как это реализованно в javascript

zilker 28.03.2013 23:51

<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.