3
06/11/2024 7:33 pm
Topic starter
Write a JS function that expands a hidden section of text when a link is clicked. The link should disappear as the rest of the text shows up.
Input/Output:
There will be no input/output, your program should instead modify the DOM of the given HTML document.
Sample HTML:
Welcome to the "Show More Text Example".
<a href="#" id="more" onclick= "showText()">Read more …</a>
<span id="text" style= "display:none">Welcome to JavaScript and DOM.</span>
<script>
function showText() {
// TODO
}
</script>
Examples:
1 Answer
2
06/11/2024 7:36 pm
Here is the solution:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
Welcome to the "Show More Text Example"
<a href="#" id="more" onclick="showText()">Click HERE to Read More...</a>
<span id="text" style="display: none">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto autem commodi corporis debitis eaque eos, exercitationem explicabo harum maiores maxime minima molestiae mollitia nam nisi obcaecati perferendis possimus quam quod?</span>
<script>
function showText() {
document.getElementById("text").style.display = "inline";
// document.querySelector("#text").style.display = "inline";
document.getElementsById("more").style.display = "none";
}
</script>
</body>
</html>
