<head>
<style>
body {
background-color:#FCF5E6
}
.hide {
display:none;
}
.click {
cursor:pointer;
}
.all-wrap {
display:inline-block;
min-width:250px;
padding:12px;
border:2px #FEA400 solid;
border-radius:16px;
box-shadow:2px 2px 2px #798B8B;
}
.this-wrp {
width:250px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".click").click(function(){
$(".this-wrp").slideToggle(200).delay(700).slideToggle(300);
var spoil=$(this).parents('.all-wrap').find(".spoil-content");
(spoil.is(':visible') )?(spoil.toggle(100)):(setTimeout(function(){spoil.toggle(300)},900));
$(".click").toggle();
});
});
</script>
</head>
<body>
<div class=all-wrap>
<div align=center class="this-wrp">
<h3 id=title-1>Вы выбрали ...</h2>
<h4 id=title-2 class="click">показать ?</h1>
<h4 id=title-3 class="click hide">свернуть ?</h1>
</div>
<div class="spoil-content hide">
<pre>
Приветы от деда Мороза!
вот....
так!
</pre>
</div>
</div>
</body>