Q: Show More Task in HTML with DOM and JavaScript

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:

asked in JavaScript category by user andrew

share on fb share via email

1 Answer

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>

answered by user eiorgert

...

Q: Show More Task in HTML with DOM and JavaScript

Log in (click HERE) or Register (click HERE) to answer this question

1 Answer

Please Log in (click HERE) or Register (click HERE) to add a comment.

Q: Show More Task in HTML with DOM and JavaScript

Log in (click HERE) or Register (click HERE) to answer this question

1 Answer

Please Log in (click HERE) or Register (click HERE) to add a comment.

Related questions