How do you add/remove hidden in with JavaScript

S

7

27

How do you add and remove 'hidden' from My Text?

I tried removing the attribute and setting it to false but neither of them worked.

  let p = document.getElementsByTagName('p');
  let myText;
    
  for (i = 0; i < p.length; i++) {
    if (p[i].innerHTML == "My Text") {
      myText = p[i];
      break;
    }
  }

  myText.removeAttribute("hidden"); // no effect
  myText.setAttribute("hidden", false); // no effect

Sporran answered 14/4, 2018 at 21:32 Comment(3)

hidden is a css property of a dom object.w3schools.com/jsref/prop_style_visibility.asp w3schools.com/cssref/pr_class_visibility.asp – Relaxation 14/4, 2018 at 21:39

What is your current p element looks like? – Tired 14/4, 2018 at 21:44

p element looks like this: My Text<\p> – Sporran 14/4, 2018 at 21:46

D

19

It looks fine here. Try with this code if you wish.

index.html

<html>
<head>

</head>
<body>
      <p hidden>My Text</p>
</body>
</html>

script

let p = document.getElementsByTagName('p');
let myText;

for (i = 0; i < p.length; i++) {
  if (p[i].innerHTML == "My Text") {
    // console.log(myText, p[0].innerHTML);
    myText = p[i];
    break;
  }
}

myText.removeAttribute("hidden");

You can see in codePen https://codepen.io/anon/pen/qozVaq

Dysart answered 14/4, 2018 at 21:52 Comment(0)

T

20

Could you set an ID on the  tag and interact with it that way?

<p id="whatever" hidden>My Text</p>

And:

let p = document.getElementById('whatever');
p.removeAttribute("hidden");

Ty answered 14/4, 2018 at 21:59 Comment(0)

D

19

It looks fine here. Try with this code if you wish.

index.html

<html>
<head>

</head>
<body>
      <p hidden>My Text</p>
</body>
</html>

script

let p = document.getElementsByTagName('p');
let myText;

for (i = 0; i < p.length; i++) {
  if (p[i].innerHTML == "My Text") {
    // console.log(myText, p[0].innerHTML);
    myText = p[i];
    break;
  }
}

myText.removeAttribute("hidden");

You can see in codePen https://codepen.io/anon/pen/qozVaq

Dysart answered 14/4, 2018 at 21:52 Comment(0)

A

3

Instead of using addAttribute and removeAttribute use:

myText.hidden = false
// or
myText.hidden = true

Aquavit answered 20/4, 2022 at 14:12 Comment(0)

H

1

Removing comparison text works fine for me:

let p = document.getElementsByTagName('p');
    let myText;
    for (i = 0; i < p.length; i++) {
        var txt = document.getElementsByTagName('p')[i].innerHTML;
        if (p[i].innerHTML == txt) {
            myText = p[i];
            break;
        }
    }

myText.removeAttribute("hidden");

Here is the working version: https://jsfiddle.net/j0467m8m/15/

Helve answered 14/4, 2018 at 22:9 Comment(0)

I

1

I've got something similar, using js to set or remove hidden from a div, it works for fullscreen or 1200px, but didn't work for 690px:

let sidebar = document.querySelector(".dropdown-btn");
let dropdownSidebar = document.querySelector(".three");

dropdownSidebar.addEventListener("click", function(){
   sidebar.hasAttribute("hidden") ? sidebar.removeAttribute("hidden") : sidebar.setAttribute("hidden", "");
});

Incorporating answered 7/2, 2023 at 11:11 Comment(1)

Demonstrating both add and remove. – Westney 21/10, 2023 at 22:59

M

0

function show(){
x = document.getElementsByTagName('p');
if(x[0].style.visibility === "hidden"){
   x[0].style.visibility = "visible"   
 }else{
   x[0].style.visibility = "hidden"  
}}

<p >this is hidden</p>
<button onClick='show()'>show</button>

Micrometeorology answered 14/4, 2018 at 21:58 Comment(0)

H

-1

You must have probably given your image a display of block, this can cause the error you have now. Remove display styling, and you should be good to go.

Hydrocortisone answered 4/12, 2021 at 15:3 Comment(0)

Recommended topics

Hot tags