Короче следующий спойлер работает только при подключенном jquery.
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
}
И вставляешь ява-скрипт в тело документа:
<script type="text/javascript">
$('.title').append('<span></span>'&#
41;;
$('.post span').each(function() {
var trigger = $(this), state = false, el = trigger.parent().next
('.entry');
trigger.click(function(){
state = !state;
el.slideToggle();
trigger.parent().parent().to
ggleClass('inactive');
});
});
</script>
Очень красивая анимация получается, без лишних понтов, скромно и стильно. Если был на сайте lostfilm и качал торрент, то наверняка видел этот спойлер. Он выплывает когда нажимаешь на название серии.
