Проблема в том, что раскрывается резко, а вот в обратную сторону работает как надо.
$('.test').click(function() {
var test = $(this).prev();
if (test.innerHeight() == 106) {
test.animate({
height: "100%",
}, 1000);
} else {
test.animate({
height: 106,
}, 1000);
}
});
p {
background-color: #E3DEDE;
height: 106px;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<p>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. Batches turns out lush and porous. This grade of flour don’t use for turn out for saltwater fish splashDifferent grade of flour differ from each other parameters: the amount of flour, which turn our from 100 kg of grain,
product color, ash content, particle size, as well as the presence of bran and the amount of gluten.</p>
<button class="test">test</button>
Как обойти? Нужно по клику раскрыть блок на максимальную высоту. Думаю проблема вот здесь.
height: "100%"
пробовал ставить сюда auto, не работает. Хочет только целое значение.
Пример на jsfiddle
Можно с помощью scrollHeight вычислять реальную высоту блока. Затем подставлять это значение в параметр height
$('.test').click(function() {
var test = $(this).prev();
if (test.innerHeight() == 106) {
test.animate({
height: test.prop('scrollHeight') + "px", // Реальная высота
}, 1000);
} else {
test.animate({
height: 106,
}, 1000);
}
});
p {
background-color: #E3DEDE;
height: 106px;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<p>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. Batches turns out lush and porous. This grade of flour don’t use for turn out for saltwater fish splashDifferent grade of flour differ from each other parameters: the amount of flour, which turn our from 100 kg of grain,
product color, ash content, particle size, as well as the presence of bran and the amount of gluten.</p>
<button class="test">test</button>
По поводу возможности раскрывать "поверх" других блоков, то это уже, как мне кажется, надо решать вёрсткой. Например, ознакомьтесь со свойством position
Продвижение своими сайтами как стратегия роста и независимости