SilverMountain,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
background: #8FBC8B
}
.slide-panel{
overflow:hidden;
width: 450px;
margin: 0px auto;
}
.slide-panel .content{
border-radius:10px;
border:#8B4513 4px solid;
padding:5px;
background:#FFA500;
}
.slide-panel .slide-button{
margin: 0px 1%;
text-align: center;
display:inline-block;
color:#fff;
text-decoration:none;
text-shadow:1px 1px 1px #000;
background:#ff8a2b;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc154', endColorstr='#ff8a2b');
background:-webkit-gradient(linear,left top,left bottom,from(#ffc154),to(#ff8a2b));
background:-moz-linear-gradient(top,#ffc154,#ff8a2b);
background:gradient(linear,top,#ffc154,#ff8a2b);
border:1px solid #ff8a2b;
border-radius:10px;
}
.slide-button {
font: normal 14px Arial,Helvetica,Sans-serif;
cursor: pointer;
position: relative;
width: 180px;
height: 25px;
line-height: 25px;
text-align: center;
border: 1px solid #87a36c;
margin-bottom: 8px;
padding: 5px;
border-radius: 3px;
background: #97BA78;
color: #ffffff;
}
.slide-button:hover {
background: #D2691E;
border: 1px solid #8ba86f;
}
.br{
height: 100px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function () {
(function ($) {
$.fn.slideBox = function (params) {
var defaults = {
position: "top", // Возможные значения : "top", "bottom"
text: ["Подробнее...", "Скрыть..."],
show: true
}
if (params) $.extend(defaults, params);
return this.each(function (index, self) {
$(self).addClass("content");
var divPanel = $("<div/>", {
"class": "slide-panel"
});
$(self).wrap(divPanel);
var button = $("<a/>", {
"href": "#",
"class": "slide-button",
"text": defaults.text[+defaults.show]
});
(defaults.position == "bottom") ? button.insertAfter($(self)) : button.insertBefore($(self));
var n = +defaults.show;
button.click(function (event) {
event.preventDefault();
n = ++n % 2;
$(this).text(defaults.text[n])
$(self).stop(true,true).slideToggle("slow");
});
!defaults.show && $(self).css({
"display": "none"
})
})
};
})(jQuery);
$("#show_answer").slideBox({
show: false,
position: "bottom",
text: ["Посмотреть решение", "Спрятать решение"]
});
$(".answer").slideBox({});
})
</script>
</head>
<body>
<div id="show_answer">
<p><span class="letter_green">Пример 7.</span> Разделить число 1011011101001<sub>2</sub> на 1110011<sub>2</sub>.</p>
<p><span class="letter_green">Решение:</span></p>
<p><span class="letter_green">Ответ:</span> 1011011101001<sub>2</sub> / 1110011<sub>2</sub>=110011<sub>2</sub></p>
</div>
<p class="br"></p>
<div class="answer">
<p><span class="letter_green">Пример 7.</span> Разделить число 1011011101001<sub>2</sub> на 1110011<sub>2</sub>.</p>
<p><span class="letter_green">Решение:</span></p>
<p><span class="letter_green">Ответ:</span> 1011011101001<sub>2</sub> / 1110011<sub>2</sub>=110011<sub>2</sub></p>
</div>
</body>
</html>