Editing Dynamic HTML (section)

== Example: Displaying an additional block of text ==

The following code illustrates an often-used function. An additional part of a web page will only be displayed if the user requests it.
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Using a DOM function</title>
    <style>
        a { background-color: #eee; }
        a:hover { background: #ff0; }
        #toggleMe { background: #cfc; display: none; margin: 30px 0; padding: 1em; }
    </style>
</head>
<body>
    <h1>Using a DOM function</h1>
        
    <h2><a id="showhide" href="#">Show paragraph</a></h2>
        
    <p id="toggle-me">This is the paragraph that is only displayed on request.</p>
        
    <p>The general flow of the document continues.</p>
        
    <script>
        function changeDisplayState(displayElement, textElement) {
            if (displayElement.style.display === "none" || displayElement.style.display === "") {
                displayElement.style.display = "block";
                textElement.innerHTML = "Hide paragraph";
            } else {
                displayElement.style.display = "none";
                textElement.innerHTML = "Show paragraph";
            }
        }
        
        let displayElement = document.getElementById("toggle-me");
        let textElement = document.getElementById("showhide");
        textElement.addEventListener("click", function (event) {
            event.preventDefault();
            changeDisplayState(displayElement, textElement);
        });
    </script>
</body>
</html>
</syntaxhighlight>