<!DOCTYPE html>
<html>
<head>
<title>Contraction Script</title>
<style>
.contracted {
height: 50px;
overflow: hidden;
}
.expand-button {
cursor: pointer;
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="content" class="contracted">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam iaculis tincidunt mauris, ac tempus nibh consequat vitae. Curabitur at augue in elit viverra tristique non a nunc. Fusce dapibus, mauris id pellentesque venenatis, arcu est suscipit felis, at posuere massa lacus vel diam. </p>
</div>
<p class="expand-button" onclick="expandContent()">Expand</p>
<script>
function expandContent() {
var content = document.getElementById("content");
content.classList.remove("contracted");
}
</script>
</body>
</html>
Comments
Post a Comment