Форум

Drongo_x17 · #1 (**permalink**) 21.11.2017, 21:19

Доброго вечера уважаемые форумчане!
Столкнулся с проблемой.

Пример:
Есть блок
<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;
}

рони · #2 (**permalink**) 21.11.2017, 21:42

Drongo_x17,
макет сделайте
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Drongo_x17 · #3 (**permalink**) 22.11.2017, 17:35

Сообщение от рони

Drongo_x17,
макет сделайте
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Исправил.

рони · #4 (**permalink**) 22.11.2017, 20:32

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>

Форум

Справочник

Discord чат

Курсы javascript