Демо спойлера можете посмотреть [ здесь ]
Код спойлера нужно разместить там, где будет находиться:
<div class="spoiler-wrapper">
<div class="spoiler folded"><a href="javascript:void(0);">Текст - заголовок спойлера</a></div>
<div class="spoiler-text">Текст, размещенный внутри спойлера.</div>
</div>{codeBox}
А вот этот код необходимо разместить между тегами head:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function(){
jQuery('.spoiler-text').hide()
jQuery('.spoiler').click(function(){
jQuery(this).toggleClass("folded").toggleClass("unfolded").next().slideToggle()
})
})
// ]]></script>{codeBox}
Ссылка в заголовке здесь сделана лишь для того, чтобы можно было красиво его оформить. Например, в демонстрационном варианте мы добавили пунктирную линию, подчеркивающую ссылку, т.к. это чаще всего обозначает спойлер, по крайней мере так сидит в подсознании пользователей.
Для того, чтобы оформить спойлер, как в демонстрационном варианте, необходимо в css добавить следующие стили:
.spoiler a{font-size: 22px;color: #000000;border-bottom: #000000 dashed 2px;text-decoration: none;}
.spoiler a:hover {text-decoration: none;}
.spoiler-text {max-width:100%;margin: 15px 25px;font-size: 18px;}{codeBox}
Вот и всё, спойлер готов. Конечно, здесь ещё можно добавить много разных красивых эффектов, т.к. возможности jQuery иногда поражают воображение, но моей задачей было рассказать о простейшем спойлере, который может понадобиться в любую минуту.