Доброго времени суток уважаемые читатели блога Мои тараканы.
Сегодня я хочу поделиться с вами одной интересной вещью, которая может пригодиться при создании сайтов. Как вы могли понять из заголовка — это гармошка-сполйер.
Простое но довольно интересное решение я нашел здесь. Я немножко поработал с CSS и представляю вам свой вариант.
Этот код вставляем в том месте где хотим видеть спойлер.
<h2 class="trigger"><a href="#">Заголовок</a></h2> <div class="toggle_container"> <div class="block">Содержимое спойлера</div> </div>
А этот код вставляем в файл CSS.
h2.trigger {
width: 647px;
height: 40px;
padding: 0 0 0 50px;
margin: 0 0 5px 0;
font-weight: normal;
font-size: 15px;
float: left;
line-height: 40px;
border: 1px solid #0454a8;
color: #fff;
text-decoration: none;
background: #0973bb;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0f97d0', endColorstr='#0454a8');
background: -webkit-gradient(linear, left top, left bottom, from(#0f97d0), to(#0454a8));
background: -moz-linear-gradient(top, #0f97d0, #0454a8);
background: gradient(linear, top, #0f97d0, #0454a8);
border: 1px solid #0454a8;
}
h2.trigger:hover {
color: #fff;
text-decoration: none;
background: #0973bb;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0454a8', endColorstr='#0454a80f97d0');
background: -webkit-gradient(linear, left top, left bottom, from(#0454a8), to(#0454a80f97d0));
background: -moz-linear-gradient(bottom, #454a8, #0f97d00);
background: gradient(linear, bottom, #0454a8, #0f97d0);
border: 1px solid #0454a8;
}
h2.trigger a {
color: #fff;
text-decoration: none;
display: block;
}
h2.trigger a:hover {
color: #fff;
}
.toggle_container {
background-color: #000;
opacity: 0.9;
margin: 0 0 5px;
padding: 0;
font-size: 1em;
width: 698px;
clear: both;
overflow: hidden;
margin-top: 8px;
border-radius: 0 0 5px 5px;
font-family: Cambria, Georgia, serif;
font-style: italic;
font-size: 16px;
border: 1px solid #333;
}
.block {
padding: 20px;
}
И остается JQuery. Этот код нужно разместить между тегами <head></head>.
<script type="text/javascript" language="javascript">// <![CDATA[
$(document).ready(function() {
$('h2:first').addClass('active');
$('.toggle_container:not(:first)').hide();
$('h2.trigger').click(function() {
$(this).toggleClass('active').next().slideToggle('slow') .siblings("div:visible").slideUp('slow');
$(this).siblings('h2').removeClass('active');
return false; //
});
});
// ]]></script>
Вот собственно и всё. Пример работы представленного скрипта можно увидеть здесь. Кстати, сайт на котором представлен данный пример — это дело моих рук. Если не сложно черкните пару слов в комментариях, что можете сказать об этом сайте. Для меня это очень важно.
С уважением, Мышак Пётр.