Показать сообщение отдельно
  #6 (permalink)  
Старый 28.03.2013, 23:51
Аватар для zilker
Профессор
Отправить личное сообщение для zilker Посмотреть профиль Найти все сообщения от zilker
 
Регистрация: 30.07.2011
Сообщений: 189

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

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