Показать сообщение отдельно
  #3 (permalink)  
Старый 01.01.2014, 21:44
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

NoJQuery вариант!
<style>
.date{
    background: #D5A4C9;
    cursor: pointer;
    margin-bottom: 1px;
}
.spoiler{
    border: 1px solid blue;
}
.clear {
    display: none;
}
</style>
 
<div class="tv">
        <div class="date">1</div>
        <div class="spoiler clear">Текст 1</div>
</div>
<div class="tv">
        <div class="date">2</div>
        <div class="spoiler clear">Текст 2</div>
</div>
<div class="tv">
        <div class="date">3</div>
        <div class="spoiler clear">Текст 3</div>
</div>
<script>
(function(){
    var active = null;
    var onclick = function() {
        var block = this.parentNode.querySelector('.spoiler');
        if (active !== null) {
            active.className += ' clear';
            if (active === block) {
                active = null;
                return;
            }
            active = null;
        }
        block.className = 'spoiler';
        active = block;
    }
    var togglers = document.querySelectorAll('.tv .date');
    for (var i = 0, toggler; toggler = togglers[i]; i++) {
        toggler.onclick = onclick;
    }
})();
</script>
__________________
В личку только с интересными предложениями
Ответить с цитированием