I stumbled upon this interesting example that demonstrates how to create expandable/collapsible text when clicked.
My question is, how can I initially set the value to be hidden so that the paragraph starts off collapsed and expands only when clicked?
Here's the code snippet:
div#expand {
width: 500px;
display:none;
}<html lang="en">
<head>
<meta charset="utf-8">
<script>
function show() {
if (document.getElementById('expand').style.display == 'none')
document.getElementById('expand').style.display = 'block';
else
document.getElementById('expand').style.display = 'none';
}
</script>
</head>
<body>
<p>
<a href="javascript:;" onclick=show()>About Us</a>
<div id="expand">
<p>This is all about us. <br></p>
</div>
</p>
</body>
</html>