I have the following hidden <p> element in the body tag of my HTML file (for my chrome extension).

<p hidden id="button">
    <a id="dashboard-btn" href="www.google" target="_blank" rel="noopener noreferrer">
      www.google
    </a>
</p>

I want to unhide this using JavaScript. My random try that failed to unhide it:

document.getElementById("button").style.visibility = 'visible';

[SOLVED] This (also) worked:

document.getElementById("button").style.display = "block";

I have the following hidden <p> element in the body tag of my HTML file (for my chrome extension).

<p hidden id="button">
    <a id="dashboard-btn" href="www.google." target="_blank" rel="noopener noreferrer">
      www.google.
    </a>
</p>

I want to unhide this using JavaScript. My random try that failed to unhide it:

document.getElementById("button").style.visibility = 'visible';

[SOLVED] This (also) worked:

document.getElementById("button").style.display = "block";

• javascript
• html
• google-chrome-extension
• hide
• show-hide

• 1 why dont you hide with display: none and unhide it with display: block? or use element.removeAttribute(attrName)? – tacoshy Commented Nov 11, 2021 at 14:43
• @tacoshy Why remove attribute instead of use the property of hidden attribute? – Simone Rossaini Commented Nov 11, 2021 at 14:49
• @SimoneRossaini, if we replace display none with visibility hidden, then we can make a beautiful transition. And changing attribute directly or through the setter is not a big difference. But I think directly, like you mention is a more clean way – Mila A Commented Nov 11, 2021 at 14:52
• 1 In 20+ years of using html I have never seen the hidden html attribute used in the wild. And I did not know it existed. Reading MDN makes me consider using it as opposed to my current method of creating a class named "hidden" with display: none and adding or removing that class as needed. Any advice regarding that? – Rob Moll Commented Nov 11, 2021 at 14:58
• @RobMoll, I think it is more about semantics and whether you want to animate the element from hidden state to visible, or no. – Mila A Commented Nov 11, 2021 at 15:20

5 Answers 5

You can use removeAttribute

document.getElementById("button").removeAttribute('hidden')

<p hidden id="button">
  <a id="dashboard-btn" 
     href="www.google." 
     target="_blank" 
     rel="noopener noreferrer">
      www.google.
    </a>
</p>

You hide your element with attribute hidden so you need to control that attribute instead of style like:

document.getElementById("button").hidden = false; 

<p hidden id="button">
    <a id="dashboard-btn" href="www.google." target="_blank" rel="noopener noreferrer">
      www.google.
    </a>
</p>

Reference:

• hidden

Try with this

document.getElementById("button").removeAttribute("hidden")

You can remove the attribute "hidden".

document.getElementById("button").removeAttribute("hidden")

I have several solutions:

A

document.getElementById("button").hidden = "false";

As hidden is not a css visibility : hidden; property.

It is an attribute.

B

As @tacoshi mentioned,

.hidden {
  opacity: 0;
  transition: opaicty 1s ease;
  /* use opacity in case you want to have a beautiful transition */
}

And just use

document.getElementById("button").classList.toggle("hidden")