Kann mir jemand sagen, was ich falsch mache? Ich möchte, dass der versteckte Textteil bei Drücken des Buttons erscheint. Ich habe bewusst keine ID's gewählt, sondern Klassen, damit ich die Funktion öfter in einer Seite verwenden kann.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main{
display: none;
}
</style>
</head>
<body>
<div>
<div class="responsive">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit et quisquam laudantium veritatis accusantium
soluta distinctio deleniti architecto harum illum cum ducimus, at dolore facilis nostrum maiores, voluptas fugit sunt. <br>
<button onclick="fun()">Lesen Sie mehr</button></div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium consequuntur molestias numquam quam cum ipsam sit praesentium, esse at deserunt repudiandae a aperiam! Fugiat, dicta deserunt suscipit officia nihil dolor?</p>
</div>
</div>
<script>
function fun(){
var x = document.getElementsByClassName("main");
if (x.style.display === "block"){
x.style.display = "none";
}
else{
x.style.display = "block";
}
}
</script>
</body>
</html>