JavaScript hide/show element

JavaScript hide/show element

How could I hide the ‘Edit’-link after I press it? and also can I hide the “lorem ipsum” text when I press edit?


Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum


Solution 1:

function showStuff(id, text, btn) {
    document.getElementById(id).style.display = 'block';
    // hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';
    // hide the link = 'none';
<td class="post">

<a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115"></textarea>

<span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>

Solution 2:

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.

Solution 3:

I would like to suggest you the JQuery option.


For example:

     //Your actions here

Solution 4:

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.

Related:  Does .css() automatically add vendor prefixes?

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

Hiding it using the standard JavaScript makes it this, as expected: {
  display: none;

Making it visible again using display = ‘block’ changes it to this: {
  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.

Solution 5:

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 class="post-text" id="text1">Lorem ipsum ... </span>

You’ll be able to switch from one view to the other simply using CSS rules : >, >, >
    display : none;

And JS code that switch between the two classes

<script type="text/javascript">
function showStuff(aPostTd) {

Solution 6:

you can use hidden property of element: