При клике выпадает текст и этим смещает блок, что идет дальше по коду. А хотелось бы чтоб он выпадал поверх. С помощью добавления position: absolute
всё работает как надо, но кнопка исчезает. Хотелось, чтоб кнопка уезжала вместе с текстом. Возможно кто-то сталкивался и поможет с этим вопросом?
https://jsfiddle.net/3cdkhkdt/7/
Можно так:
$('.test').click(function() {
var test = $(this).prev();
if (test.innerHeight() == 0) {
test.animate({
height: test.prop('scrollHeight') + "px",
}, 1000);
} else {
test.animate({
height: 0,
}, 1000);
}
});
p {
padding: 0px;
margin: 0px;
}
.container {
position: relative;
padding-top: 40px;
}
.showhide {
position: absolute;
left: 0px;
top: 0px;
}
.test-block {
background-color: #E3DEDE;
height: 0;
overflow: hidden;
}
.test {
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="showhide">
<p class="test-block">The best products begin with the best ingredients. Flour is milled only from select grades of the best wheat grains; the best nature has to offer, it looks like white powder. We have many varieties and formats for diverse applications.High quality
grade. This sort of flour is pretty clear from which is preparing only from well-peeled grains. This grade of flour characterize by a low content of gluten and large amount of starch. This grade of flour has white color with a light milky shade.
This grade often use in cooking, because batch turns out splendid and porous.The first grade of flout. This is the most popular grade, which allows for a small number of grain shells. This grade of flour is characterize large amount of gluten, which
makes it possible to get a very elastic dough. This grade of flour has a light yellow color. Batches turns out volumetric and fragrant.The second grade of flour. This grate is characterized by a darker grayish color, which has a large number of
grain envelopes this is allowing in the composition.</p>
<button class="test">test</button>
</div>
<p>
The first grade of flout. This is the most popular grade, which allows for a small number of grain shells. This grade of flour is characterize large amount of gluten, which makes it possible to get a very elastic dough. This grade of flour has a light
yellow color. Batches turns out volumetric and fragrant.The second grade of flour. This grate is characterized by a darker grayish color, which has a large number of grain envelopes this is allowing in the composition.
</p>
</div>
А вообще, всю вашу анимацию раскрытия/скрытия блока можно уместить в одну строчку:
$('.test').on('click', function() {
$(this).closest('.showhide').find('.test-block').slideToggle(1000);
});
p {
padding: 0px;
margin: 0px;
}
.container {
position: relative;
padding-top: 40px;
}
.showhide {
position: absolute;
left: 0px;
top: 0px;
}
.test-block {
background-color: #E3DEDE;
display: none;
}
.test {
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="showhide">
<p class="test-block">The best products begin with the best ingredients. Flour is milled only from select grades of the best wheat grains; the best nature has to offer, it looks like white powder. We have many varieties and formats for diverse applications.High quality
grade. This sort of flour is pretty clear from which is preparing only from well-peeled grains. This grade of flour characterize by a low content of gluten and large amount of starch. This grade of flour has white color with a light milky shade.
This grade often use in cooking, because batch turns out splendid and porous.The first grade of flout. This is the most popular grade, which allows for a small number of grain shells. This grade of flour is characterize large amount of gluten, which
makes it possible to get a very elastic dough. This grade of flour has a light yellow color. Batches turns out volumetric and fragrant.The second grade of flour. This grate is characterized by a darker grayish color, which has a large number of
grain envelopes this is allowing in the composition.</p>
<button class="test">test</button>
</div>
<p>
The first grade of flout. This is the most popular grade, which allows for a small number of grain shells. This grade of flour is characterize large amount of gluten, which makes it possible to get a very elastic dough. This grade of flour has a light
yellow color. Batches turns out volumetric and fragrant.The second grade of flour. This grate is characterized by a darker grayish color, which has a large number of grain envelopes this is allowing in the composition.
</p>
</div>
Попробуйте обернуть текст и кнопку в блок. Блоку задать нижний паддинг равный высоте кнопке. Блок - position:relative; У кнопки position:absolute; bottom:0; left - опционально.
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Заменил таким образом textreplace(/\n/g, "<br />") но когда начинаю рендерить то почему то он просто пишет:
Пишу простой Socket server под Linux на ССтолкнулся к непонятной для меня проблемой