Показать сообщение отдельно
  #1 (permalink)  
Старый 21.11.2017, 21:19
Новичок на форуме
Отправить личное сообщение для Drongo_x17 Посмотреть профиль Найти все сообщения от Drongo_x17
 
Регистрация: 21.11.2017
Сообщений: 2

Увеличение высоты <div position= relative> на высоту <divposition=absolute>
Доброго вечера уважаемые форумчане!
Столкнулся с проблемой.
Пример:
Есть блок
<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, 22.11.2017 в 09:12. Причина: добавление кода
Ответить с цитированием