JavaScript hide/show element

Question

How could I hide the \'Edit\'-link after I press it? and also can I hide the \"lorem ipsum\" text when I press edit?

Answer 1

You can also use this code to show/hide elements:

document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.visibility = "visible";

Note The difference between style.visibility and style.display is when using visibility:hidden unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.

See this link to see the differences.

Answer 2

I would suggest this to hide elements (as others have suggested):

document.getElementById(id).style.display = 'none';

But to make elements visible, I'd suggest this (instead of display = 'block'):

document.getElementById(id).style.display = '';

The reason is that using display = 'block' is causing additional margin/whitespace next to the element being made visible in both IE (11) and Chrome (Version 43.0.2357.130 m) on the page I'm working on.

When you first load a page in Chrome, an element without a style attribute will appear like this in the DOM inspector:

element.style {
}

Hiding it using the standard JavaScript makes it this, as expected:

element.style {
  display: none;
}

Making it visible again using display = 'block' changes it to this:

element.style {
  display: block;
}

Which is not the same as it originally was. This could very well not make any difference in the majority of cases. But in some cases, it does introduce abnormalities.

Using display = '' does restore it to its original state in the DOM inspector, so it seems like the better approach.

Answer 3

You should think JS for behaviour, and CSS for visual candy as much as possible. By changing your HTML a bit :

<td class="post">
    <a class="p-edit-btn" href="#" onclick="showStuff(this.parentNode);return false;">Edit</a>
    <span id="answer1" class="post-answer">
       <textarea rows="10" cols="115"></textarea>
    </span>
    <span class="post-text" id="text1">Lorem ipsum ... </span>
</td>

You'll be able to switch from one view to the other simply using CSS rules :

td.post-editing > a.post-edit-btn,
td.post-editing > span.post-text,
td.post > span.post-answer
{
    display : none;
}

And JS code that switch between the two classes

<script type="text/javascript">
function showStuff(aPostTd) {
    aPostTd.className="post-editing";
}
</script>

Answer 4

Just create hide and show methods yourself for all elements, as follows

Element.prototype.hide = function() {
    this.style.display = 'none';
}
Element.prototype.show = function() {
    this.style.display = '';
}

After this you can use the methods with the usual element identifiers like in these examples:

document.getElementByTagName('div')[3].hide();
document.getElementById('thing').show();

or:

<img src="removeME.png" onclick="this.hide()">

Answer 5

you can use hidden property of element:

document.getElementById("test").hidden=true;
document.getElementById("test").hidden=false