<script type="text/javascript" src="KÉP LINK">
</script><script type="text/javascript" src="KÉP LINK">
</script><script type="text/javascript">
animatedcollapse.addDiv('textbox', 'fade=1,speed=400')
animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}
animatedcollapse.init()
</script>
A doboz kódja
Ebben kell a doboz címét és a tartalmat megírni.
<div align="center">
<div id="animated-collapsible-box">
<div id="animated-collapsible-head">
<p style="text-align: center;">
<a href="#" rel="toggle[textbox]" style="">CÍM</a></p>
<div class="animated-collapsible-text">
<div fade="1" id="textbox" speed="400" style="display: none;">
Ide jön a tartalom, amit a rejtett dobozba lehet írni. Jöhet bele kép, szöveg, Chat, Facebook doboz vagy bármi más is :)
<p style="text-align: center;">
<img alt="" src="http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1414232751_66.png" style="width: 370px; height: 254px;" /></p>
</div>
</div>
</div>
</div>
</div>
CSS kód
Itt tudod beállítani, hogy a szövegdobozod hogyan nézzen ki.
<style type="text/css">
#animated-collapsible-box { /* az egész doboz */
background-color: #000000;
width: 400px;
padding: 5px;
}
#animated-collapsible-head a:link, #animated-collapsible-head a:visited, #animated-collapsible-head a:hover { /* a fejléc */
font-family: Book Antiqua;
font-size: 17px;
font-weight: normal;
color: #ffffff !important;
background-color: #e41e69;
text-align: center;
padding: 5px;
}
.animated-collapsible-text { /* tartalom */
color: #ffffff !important;
background-color: transparent;
text-align: justify;
width: 400px;
}
</style>
Nincsenek megjegyzések:
Megjegyzés küldése