Следующий элемент не сбрасывается при переполнении

Question

Я пытаюсь сделать кнопку more-less, которая скрывает и скрывает содержимое. Но у меня есть некоторые проблемы, потому что следующий элемент не сбрасывается, когда увеличивается первый div.

Это код:

$("i").click(function(){ 
 
$(".texto").toggleClass("hide-text"); 
 
});

#masTexto { 
 
position: relative; 
 
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(80, 80, 80, 0.3)), to(rgba(50, 50, 50, 0.8)), color-stop(.5, #333333)); 
 
    width: 100%; 
 
    height: 5em; 
 
    color: #28f; 
 
    margin-top : -10px; 
 
    text-align: right; 
 
} 
 

 
i { cursor: pointer; } 
 

 
.texto{ 
 
    height: 7em; 
 
    overflow: hidden; 
 
    position: relative; 
 
    clear: both; 
 
z-index: -1; 
 
} 
 

 
.hide-text{ 
 
overflow: initial; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="texto"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat laoreet tellus, vitae aliquam nisl blandit ac. Nullam nec purus erat. Nam consectetur eget nisi et tempor. Maecenas condimentum tincidunt magna quis accumsan. Nam eu egestas erat. Integer 
 
    condimentum sodales pretium. Fusce sit amet rhoncus mauris. Suspendisse feugiat consectetur enim malesuada feugiat. 
 
    <br> Aliquam rutrum, quam quis sodales hendrerit, mi nisl pellentesque felis, sed ornare magna magna sit amet lacus. Donec ligula justo, varius eget tristique vel, ultricies eget nibh. Phasellus vel leo gravida, tempor orci volutpat, sodales ex. Donec ac 
 
    arcu nulla. Sed feugiat imperdiet purus vel vehicula. In aliquam libero sed enim elementum, quis iaculis ante rutrum. Sed eget urna dictum, mattis felis vestibulum, scelerisque arcu. Fusce suscipit mi eu purus dapibus imperdiet. Fusce elit ante, semper 
 
    placerat mi quis, laoreet euismod turpis. 
 
</div> 
 
<div id="masTexto"> 
 
    <br><br><i id="mas">Leer más</i> 
 
</div>

Я изменил relative на absolute позиции и overflow:initial, но ничего не происходит. Также я ищу this reference, но doenst работает для меня. Благодарю.

Answer 1

Ваша проблема с вашим фактическим кодом заключается в том, что вы устанавливаете фиксированную высоту на элемент texto.

$("i").click(function(){ 
 
$(".texto").toggleClass("hide-text"); 
 
});

#masTexto { 
 

 
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(80, 80, 80, 0.3)), to(rgba(50, 50, 50, 0.8)), color-stop(.5, #333333)); 
 
    width: 100%; 
 
    height: 5em; 
 
    color: #28f; 
 
    margin-top : -10px; 
 
    text-align: right; 
 
} 
 

 
i { cursor: pointer; } 
 

 
.texto{ 
 
    height: 7em; 
 
    overflow: hidden; 
 
z-index: -1; 
 
} 
 

 
.hide-text{ 
 
overflow: initial; 
 
height: 15em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="texto"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut placerat laoreet tellus, vitae aliquam nisl blandit ac. Nullam nec purus erat. Nam consectetur eget nisi et tempor. Maecenas condimentum tincidunt magna quis accumsan. Nam eu egestas erat. Integer 
 
    condimentum sodales pretium. Fusce sit amet rhoncus mauris. Suspendisse feugiat consectetur enim malesuada feugiat. 
 
    <br> Aliquam rutrum, quam quis sodales hendrerit, mi nisl pellentesque felis, sed ornare magna magna sit amet lacus. Donec ligula justo, varius eget tristique vel, ultricies eget nibh. Phasellus vel leo gravida, tempor orci volutpat, sodales ex. Donec ac 
 
    arcu nulla. Sed feugiat imperdiet purus vel vehicula. In aliquam libero sed enim elementum, quis iaculis ante rutrum. Sed eget urna dictum, mattis felis vestibulum, scelerisque arcu. Fusce suscipit mi eu purus dapibus imperdiet. Fusce elit ante, semper 
 
    placerat mi quis, laoreet euismod turpis. 
 
</div> 
 
<div id="masTexto"> 
 
    <br><br><i id="mas">Leer más</i> 
 
</div>

Это с фактическим кодом ... Однако, есть более чистый способ сделать это. Это на всякий случай, если вы не хотите иметь начальный текст в одной строке. Вы можете использовать css ellipsis. Просто проверьте скрипку и измените ширину. Единственная проблема заключается в том, что css не поддерживает многострочный out of the box, для этого требуется js. Но посмотрите, подходит ли второе решение для вашего дела.

https://jsfiddle.net/9np4yatL/