Spoiler for the site?

Question

css

Hello Habr,

The second day I can not find the right spoiler. I stopped at this

for now. I write the following code:

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

As a result, everything works but not so. Instead of a titlespoiler, I need to insert my image (button) and align it to the middle of the page. I tried to wrap it in a tag <center>for alignment, as a result, the code stops working.

How can this be implemented?

Answer 1

This is JS:
<script> jQuery(document).ready(function(){ jQuery('a.spoiler-head').click(function(){ jQuery(this).next().toggle(200); return false; }); }); </script>
This is 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;}
This is the code of the spoiler itself:
<div class="spoiler"> <a class="spoiler-head" href="#">Внимание, спойлер!</a> <div class="spoiler-body">Тут содержимое нашего супер простейшего спойлера</div> <div class="clear"></div> </div>
Change the styles to your own and instead of "Attention, spoiler!" you can paste anything.

Answer 2

The developer of this module did not think this through, you can use the “class” option at most and add an image in the styles. For example:
This is the code of your spoiler:
[collapse collapsed title="описание спойлера" class="spoiler_img"] содержимое которое прячется под спойлер[/collapse]
Insert this into css:
.spoiler_img {background:url("image.png") no-repeat;}
PS To insert an arbitrary image and not distort with styles, you need to redo the code of the module itself.

Answer 3

Do you need to use the plugin? Maybe just a couple of lines and jQuery?

Answer 4

You are welcome! :)