Wie verstecke ich einen Teil eines Div in CSS/Reagieren?

Question

Ich versuche, so etwas zu tun, wo zunächst die gesamte div angezeigt wird (der gesamte Text wird angezeigt) und am unteren Rand können Sie auf eine Schaltfläche klicken, die "Show less" und nur 300px des Inhalts der div wird Jetzt wird angezeigt und die Schaltfläche wechselt zu "Mehr anzeigen".

<div className="bodyText"> 
 

 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed nunc sit amet est sollicitudin tempus. Etiam ultricies velit dolor, et rutrum ante fermentum quis. In enim nibh, imperdiet id pulvinar at, euismod id justo. Sed nisl eros, viverra ut purus et, hendrerit dictum risus. Proin ut massa libero. Vestibulum eget nisi laoreet arcu vulputate mollis non eu ipsum. Praesent tempus ut felis id consequat. Duis tincidunt id nulla vitae suscipit. Sed nec erat varius turpis elementum mattis at eu dolor. 
 

 
    Pellentesque ante orci, molestie ut tortor et, egestas varius felis. Morbi ultricies, nisl ac fringilla placerat, ante risus posuere lacus, vitae tempus lacus tellus a erat. Quisque lacinia laoreet purus sit amet facilisis. Praesent eu elementum leo. Phasellus consectetur, sapien non accumsan pulvinar, orci eros vehicula est, eget molestie diam dolor id massa. Proin ligula libero, tristique id finibus at, laoreet ac nisi. Morbi porttitor enim non turpis bibendum, id porta libero consectetur. In mattis lectus et urna luctus eleifend. 
 

 
</div>

Answer 1

Hier ist Beispiel dafür, wie das zu tun.

<div class="bodyText"> 
 

 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed nunc sit amet est sollicitudin tempus. Etiam ultricies velit dolor, et rutrum ante fermentum quis. In enim nibh, imperdiet id pulvinar at, euismod id justo. Sed nisl eros, viverra ut purus et, hendrerit dictum risus. Proin ut massa libero. Vestibulum eget nisi laoreet arcu vulputate mollis non eu ipsum. Praesent tempus ut felis id consequat. Duis tincidunt id nulla vitae suscipit. Sed nec erat varius turpis elementum mattis at eu dolor. 
 

 
    Pellentesque ante orci, molestie ut tortor et, egestas varius felis. Morbi ultricies, nisl ac fringilla placerat, ante risus posuere lacus, vitae tempus lacus tellus a erat. Quisque lacinia laoreet purus sit amet facilisis. Praesent eu elementum leo. Phasellus consectetur, sapien non accumsan pulvinar, orci eros vehicula est, eget molestie diam dolor id massa. Proin ligula libero, tristique id finibus at, laoreet ac nisi. Morbi porttitor enim non turpis bibendum, id porta libero consectetur. In mattis lectus et urna luctus eleifend. 
 

 
    Pellentesque ante orci, molestie ut tortor et, egestas varius felis. Morbi ultricies, nisl ac fringilla placerat, ante risus posuere lacus, vitae tempus lacus tellus a erat. Quisque lacinia laoreet purus sit amet facilisis. Praesent eu elementum leo. Phasellus consectetur, sapien non accumsan pulvinar, orci eros vehicula est, eget molestie diam dolor id massa. Proin ligula libero, tristique id finibus at, laoreet ac nisi. Morbi porttitor enim non turpis bibendum, id porta libero consectetur. In mattis lectus et urna luctus eleifend. 
 

 
    Pellentesque ante orci, molestie ut tortor et, egestas varius felis. Morbi ultricies, nisl ac fringilla placerat, ante risus posuere lacus, vitae tempus lacus tellus a erat. Quisque lacinia laoreet purus sit amet facilisis. Praesent eu elementum leo. Phasellus consectetur, sapien non accumsan pulvinar, orci eros vehicula est, eget molestie diam dolor id massa. Proin ligula libero, tristique id finibus at, laoreet ac nisi. Morbi porttitor enim non turpis bibendum, id porta libero consectetur. In mattis lectus et urna luctus eleifend. 
 

 
</div> 
 
<div> 
 
<input type="button" onclick="toggleBodyText()" value="Show Less" id="ButtonShow" /> 
 
</div> 
 

 
<script> 
 
function toggleBodyText() { 
 
var btn=document.getElementById('ButtonShow'); 
 
var value=btn.value; 
 
var div = document.querySelector('.bodyText'); 
 
if(value=='Show Less') 
 
{ 
 
    div.style.height='300px'; 
 
    div.style.overflowX='scroll'; 
 
    div.style.overflowY='hidden'; 
 
    btn.value='Show More'; 
 
} 
 
else 
 
{ 
 
    div.style.height='auto'; 
 
    div.style.overflowX='inherit'; 
 
    div.style.overflowY='hidden'; 
 
    btn.value='Show Less'; 
 
} 
 
} 
 
</script>