Спойлер для сайта?

Question

[Ziklon]

Здравствуй Хабр,



Второй день не могу найти нужный спойлер. Остановился пока на этом



Пишу вот такой код:

[collapse collapsed title="описание спойлера"] содержимое которое прячется под спойлер[/collapse]

В результате всё работает но не так. Мне нужно вместо title спойлера вставить своё изображение (кнопку) и выровнять её по середине страницы. Пробовал обернуть в тэг <center> для выравнивания, в результате код перестаёт срабатывать.



Как это можно реализовать?

Answer 1

[CrazyOne]

Это JS:
<script> jQuery(document).ready(function(){ jQuery('a.spoiler-head').click(function(){ jQuery(this).next().toggle(200); return false; }); }); </script>

Это CSS:
.spoiler {position:relative;} .spoiler a.spoiler-head {display:block; float:left; margin:10px 0 2px 0; text-decoration:none;} .spoiler a.spoiler-head span {padding:0; border-bottom:dashed 1px #71C83B; font-size:16px; color:#71C83B;} .spoiler .spoiler-body {display:none; position:relative; padding:6px 0 0 0; margin:0; clear:both;}

Это код самого спойлера:
<div class="spoiler"> <a class="spoiler-head" href="#">Внимание, спойлер!</a> <div class="spoiler-body">Тут содержимое нашего супер простейшего спойлера</div> <div class="clear"></div> </div>

Стили измените на свои и вместо «Внимание, спойлер!» можете вставлять что угодно.

Comments

[Ziklon]

Спасибо, получилось, картинку вставил так:

Код:
<div class="spoiler" > <a class="spoiler-head" <a href="#"><img alt="" src="/sites/default/files/image.png" /></a> <div class="spoiler-body">

CSS тоже под себя немного подправил.

Огромное спасибо!!!

Answer 2

[CrazyOne]

Разработчиком этого модуля это продумано небыло, максимум можете использовать опцию «class» и в стилях прописать туда изображение. Например так:

Это код вашего спойлера:

[collapse collapsed title="описание спойлера" class="spoiler_img"] содержимое которое прячется под спойлер[/collapse]

Это вставляйте в css:

.spoiler_img {background:url("image.png") no-repeat;}

P.S. Чтобы вставлять произвольное изображение и не извращаться со стилями, нужно переделать код самого модуля.

Comments

[Ziklon]

Спасибо за помощ но так тоже не работает. Взгляните сами.

Нашёл информацию что этот спойлер использует fieldset а fieldset не поддерживает картинки.
Может есть другое решение? У всех спойлеров что я видел title текстовый.

Вот пример того что мне надо. Там есть кнопка «родословная», как это сделано?

Answer 3

[CrazyOne]

Вам обязательно плагин использовать? Может просто пару строчек и jQuery?

Answer 4

[CrazyOne]

Пожалуйста! :)