Forum - Xobor-Spoiler mit neuen Formatierungen ausstatten

[spoiler2]
...
[/spoiler2]
 

<div class="hpm_spoiler"><div class="hpm_spoiler_headdiv"><input type="button" onclick="hpm_spoiler(this.parentNode.parentNode);" class="hpm_spoiler_headinput hpm_spoiler_closed" value="Spoiler"></div><div><div class="hpm_spoiler_body"><div style="padding: 10px;">
... 
</div></div></div></div>
 

[spoiler2={{sname}}]
...
[/spoiler2]
 

<div class="hpm_spoiler"><div class="hpm_spoiler_headdiv"><input type="button" onclick="hpm_spoiler(this.parentNode.parentNode);" class="hpm_spoiler_headinput hpm_spoiler_closed" value="{{sname}}"></div><div><div class="hpm_spoiler_body"><div style="padding: 10px;">
...
</div></div></div></div>
 

[spoiler2={{sname}} title={{tname}} style={{stname}}]
...
[/spoiler2]
 

<div class="hpm_spoiler"><div class="hpm_spoiler_headdiv"><input type="button" onclick="hpm_spoiler(this.parentNode.parentNode);" class="hpm_spoiler_headinput hpm_spoiler_closed" value="{{sname}}" title="{{tname}}" style="{{stname}}"></div><div><div class="hpm_spoiler_body"><div style="padding: 10px;">
...
</div></div></div></div>
 

[spoiler2={{sname}} title={{tname}}]
...
[/spoiler2]
 

<div class="hpm_spoiler"><div class="hpm_spoiler_headdiv"><input type="button" onclick="hpm_spoiler(this.parentNode.parentNode);" class="hpm_spoiler_headinput hpm_spoiler_closed" value="{{sname}}" title="{{tname}}"></div><div><div class="hpm_spoiler_body"><div style="padding: 10px;">
...
</div></div></div></div>
 

/*Spoiler-Design*/
.hpm_spoiler_body {margin-left:0.5%;border-color:#383838;border-style:double;border-width:0 5px 5px 5px;border-radius:0 0 5px 5px;width:98.5% !important;wwidth:auto !important;color:#000000;background-color:#fefefe;background-color:#eeeeef;}
.hpm_spoiler_body ul{padding-left:15px;list-style-type: disc;}
.hpm_spoiler_headdiv {background:#cccccc;border:2px solid #777777;border-radius:5px;}
.hpm_spoiler_headdiv:hover {background:#dddddd;}
.hpm_spoiler_headdiv input{color:#383838 !important;}
.hpm_spoiler_closebutton {background-color:#cccccc;border-top:1px solid #383838;padding:2px 10px;font:normal 11px Verdana,Arial,sans-serif;font-style:italic;}
.hpm_spoiler_closebutton:hover {background-color:#dddddd;}
.hpm_spoiler_closebutton a {display:block;width:100%;color:#383838 !important;text-decoration:none !important;}
.codelines{background-color:#aaaaaa;color:#ffffff;mmargin:0px !important;}
.hpm_spoiler, .hpm_spoiler_headinput {width:99% !important;outline:none;clear:both;color:#ffffff !important}
.bbcode_code {color:#eeeeee !important;}
.code pre {background-color:#040460;background-color:#ffffff !important;color:#000000;max-width: 95% !important;min-width: 90% !important;}
 
 

[spoiler2={{name}}] 
...  
[/spoiler2]
 

<div class="hpm_spoiler"><div class="hpm_spoiler_headdiv"><input type="button" onclick="hpm_spoiler(this.parentNode.parentNode);" class="hpm_spoiler_headinput hpm_spoiler_closed" value="{{name}}"></div><div><div class="hpm_spoiler_body"><div style="padding: 10px;"> 
...
</div><div class="hpm_spoiler_closebutton"><a title="Spoiler schließen!" href="javascript:void(0);" onclick="hpm_spoiler(this.parentNode.parentNode.parentNode.parentNode);">Schließen</a></div></div></div></div>
 

Reihenfolge: 0
 

.hpm_spoiler_closebutton {
background-color:#F8F8F8;
font-size:75%;
font-style:italic;
border:1px solid #F2F2F2;
padding:2px 9px !important;
margin-bottom:10px; 
}
 
.hpm_spoiler_closebutton a {	
display:block;	
width:100%;	
color:black;	
text-decoration:none;
}
 

<script>
/* Xobor-Spoiler mit Scroll-Funktion */
var TopSpoil = 250; /* Lesehöhe (ohne Pixel-Eintrag!) */
var TimeSpoil = 500; /* Scroll-Geschwindigkeit! */
 
$(".hpm_spoiler_headdiv").click(function (){
$('html,body').animate({scrollTop: ($(this).offset().top) - TopSpoil}, TimeSpoil);
 
$('.hpm_spoiler_closebutton').click(function (){
$('html,body').scrollTop($(this).closest('.hpm_spoiler').offset().top - TopSpoil);
});
 
});
</script>