Привет. На этой недели я решил слегка изменить вид своей админки и добавить пару хороших новшеств в её функционал, как всегда в поисках счастья я начал гуглить инет и наткнулся на довольно неплохую реализацию основанную на jQuery - Эффект сворачивания однотипных блоков!
jQuery - Эффект скрытия div блоков
Чем мы сегодня и займемся, для этого нам понадобится написать html каркас будущих блоков, создать таблицу стилей и прикрутить к нашей странице javascript.

Приступим!

html код довольно прост и не требует дополнительного объяснения.

<div class="post">
    <div class="title">
        <h3><a href="" title="">Заголовок</a></h3>
        <p>Автор, 12.02.2010</p>
    </div>
    <div class="entry">
        <!-- Контент -->
    </div>
</div>

<div class="post">
    <div class="title">
        <h3><a href="" title="">Заголовок</a></h3>
        <p>Автор, 12.02.2010</p>
    </div>
    <div class="entry">
        <!-- Контент -->
    </div>
</div>

В примере я использовал несколько постов для наглядности! Скрываться будет их контентная часть.

css код

.post {
    padding:10px 20px;
    position:relative;
    background:#eee;
    margin-bottom:20px
}
.inactive {
    color:#bbb
}
.post .title {
    position:relative;
    height:1%
}
.post .title h3 {
    font-size:1.4em
}
.post .title h3 a {
    text-decoration:none;
    color:#000
}
.inactive .title h3 a {
    color:#bbb
}
.post .title p {
    font-size:0.7em;
    font-style:italic;
    font-weight:bold;
    margin:0
}
.post .title span {
    position:absolute;
    right:0;
    top:30%;
    cursor:pointer;
    width:14px;
    height:14px;
    background:url(trigger.gif) no-repeat left bottom;
    display:block;
    font-size:0
}
#content .inactive .title span {
    background-position:left top
}
#content .post .entry {
    padding:10px 0
}

Span будет служить переключателем для сворачивания и разворачивания блоков и будет добавлен с помощью javascript. Предупреждаю пользователи с отключенным javascript не увидят ничего не делающий элемент.

javascript

$('.title').append('<span></span>');
$('.post span').each(function() {
   var trigger = $(this), state = false, el = trigger.parent().next

('.entry');
   trigger.click(function(){
      state = !state;
      el.slideToggle();
      trigger.parent().parent().toggleClass('inactive');
   });
});

Ну вот и все! Удачи.

Добавлено: 28 Апреля 2018 09:41:50 Добавил: Андрей Ковальчук Нравится 0

Добавить