How Can JavaScript Dynamically Hide and Show HTML Elements?

Hiding Elements Dynamically using JavaScript

Suppose you have a button that allows users to edit a text element. After clicking the button, you may want the button to disappear and the text element to be replaced with a text area for editing. Here's how you can achieve this using JavaScript:

function showStuff(id, text, btn) {
    // Display the element with the given ID
    document.getElementById(id).style.display = 'block';

    // Hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';

    // Hide the link
    btn.style.display = 'none';
}

In the provided HTML snippet, here's how you can modify it:

<td class="post">

    <a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
    <span>

When the "Edit" link is clicked, the following actions occur:

• The hidden "answer1" span, containing the text area, becomes visible.
• The "text1" span, containing the lorem ipsum text, is hidden.
• The "Edit" link itself becomes invisible.

The above is the detailed content of How Can JavaScript Dynamically Hide and Show HTML Elements?. For more information, please follow other related articles on the PHP Chinese website!