Добрый вечер, необходимо чтобы слайд-панелька раскрывалась в зависимости от высоты содержимого.
Изначально делал ставку на 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;
}