Javascript-форум - Использование slideUp и slideDown

Добрый вечер, необходимо чтобы слайд-панелька раскрывалась в зависимости от высоты содержимого.
Изначально делал ставку на animate {height: "100%"}, но тогда эффект плавного скольжение не применяется, с пикселями работает нормально
Понял, что нужно использовать slideUp, slideDown и Toggle, но при внедрении их вместо animate панелька перестает открываться вовсе.

Что необходимо изменить в коде, чтобы осуществить поставленную задачу?

HTML:

<script>
$(document).ready(function(){
$("#show_answer").slideBox({width: "100%", height: "100%", position: "bottom"});
});
</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>
</body>
</html>

Cкрипт:

(function($){
    $.fn.slideBox = function(params){
    var content = $(this).html();
        var defaults = {
            width: "100%",
            height: "100%",
            position: "bottom"          // Возможные значения : "top", "bottom"
        }
        
        if(params) $.extend(defaults, params);
        
        var divPanel = $("<div class='slide-panel'>");
        var divContent = $("<div class='content'>");
    
        $(divContent).html(content);
        $(divPanel).addClass(defaults.position);
        $(divPanel).css("width", defaults.width);
 
        // Добавляем кнопку
        $(divPanel).append("<div class='slide-button'><b>Посмотреть решение</b></div>");
        $(divPanel).append("<div style='display: none' id='close-button' class='slide-button'><b>Спрятать решение</b></div>");
        
        if(defaults.position == "bottom")
            $(divPanel).append($(divContent));
        
        $(this).replaceWith($(divPanel));
        
        //Действие по нажатию кнопки
        $(".slide-button").click(function(){
            if($(this).attr("id") == "close-button")
                $(divContent).animate({height: "0px"}, 1000);
            else
                $(divContent).animate({height: defaults.height}, 1000);
            
            $(".slide-button").toggle();
        });
    };
})(jQuery);

Ну и CSS на всякий

.slide-panel {
	position:absolute; /*position:fixed*/
}
/*.bottom {bottom: 0;}
.top {top: 0;} для положения формы на странице*/ 

.content {
	border: 1px solid #dcdcdc;
	font: normal 14px Arial,Helvetica,Sans-serif;
	overflow: hidden;
	height: 0;
	width: 80%;

margin-left: 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: #9cbf7c; /*a0c480*/
	border: 1px solid #8ba86f;
}

<!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>