Открывающиеся списки!

[Maks456]

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

[zilker]

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

[Maks456]

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

[zilker]

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

[Maks456]

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

[zilker]

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

Как-то так. Только этот код не кроссбраузерный. Да и вообще, можно было бы и красивее сделать)