Увеличение высоты <div position= relative> на высоту <divposition=absolute>
Доброго вечера уважаемые форумчане!
Столкнулся с проблемой. :help: Пример: Есть блок <div class=”1” position= relative> в нем есть еще 4 дива с информацией. Первый из дивов имеет позицию абсолют. Прижатый к низу блока 1 (две строчки текста который при нажатии на ссылку раскрывается еще строчек на 20). Раскрываеться в вверх и наезжает на блок который стоит над ним. А мне нужно что б расширялся в низ. То есть div class=”1” position= relative увеличился на высоту div с position= absolute. Как это реализовать с помощью JS.
<div class="body-content">
<div class="content-wrap">
<div class="description-wrap">
<div class="wrap-text">
<p>……...</p>
<p>…………….</p>
</div>
<p><a class='more'>Больше</a></p>
</div>
</div>
[js]
<script type="text/javascript">
$.fn.clicktoggle = function(a, b) {
return this.each(function() {
var clicked = false;
$(this).click(function(e) {
e.preventDefault();
if (clicked) {
clicked = false;
return b.apply(this, arguments);
}
clicked = true;
return a.apply(this, arguments);
});
});
};
$(function(){
$('.more').clicktoggle(function(){
$(this).parent().prev().slideToggle(700);
$(this).text('Hide');
}, function(){
$(this).parent().prev().slideToggle(700);
$(this).text('Read More');
});
});
</script>
[/js]
<section id="block-slider">
……………………..
</section>
<section id="service">
…………………………………………………
</section>
<section id="portfolio">
…………………………
</section>
</div>
</div>
.body-content {
min-height: 100%;
}
.content-wrap {
position: relative;
padding-bottom: 22em;
}
.description-wrap {
position: absolute;
bottom: 0;
left: 0;
z-index: 100;
border: 1px solid #ccc;
width: 500px;
margin: 0 0 30px 0;
border-radius: 15px;
padding: 15px;
}
.wrap-text {
display: none;
}
.more{
cursor: pointer;
text-decoration: underline;
color: #ff0000;
}
.more:hover{
text-decoration: none;
}
|
Drongo_x17,
макет сделайте Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Цитата:
|
Drongo_x17,
не самый лучший вариант, за лучшим к дизайнерам...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.body-content {
min-height: 100%;
}
.content-wrap {
position: relative;
padding-bottom: 22em;
}
.description-wrap {
position: absolute;
bottom: 0;
left: 0;
z-index: 100;
border: 1px solid #ccc;
width: 500px;
margin: 0 0 30px 0;
border-radius: 15px;
padding: 15px;
}
.wrap-text {
display: none;
}
.more{
cursor: pointer;
text-decoration: underline;
color: #ff0000;
}
.more:hover{
text-decoration: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".content-wrap").each(function(indx, el) {
var h = $(el).height(),
block = $(".wrap-text", el),
hh = $(".description-wrap", el).height();
$(".more", el).click(function(event) {
event.preventDefault();
var hide = block.is(":hidden"),
text = hide ? "Скрыть" : "Больше";
block.toggle(700, function() {
$(el).animate({
height: hide ? h + $(".description-wrap", el).height() - hh : h
}, 300)
});
$(this).text(text)
})
})
});
</script>
</head>
<body>
<div class="body-content">
<div class="content-wrap">
<div class="description-wrap">
<div class="wrap-text">
<p>……...</p>
<p>…………….</p>
</div>
<p><a class='more'>Больше</a></p>
</div>
</div>
<section id="block-slider">
……………………..
</section>
<section id="service">
…………………………………………………
</section>
<section id="portfolio">
…………………………
</section>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 07:20. |