hide html element using javascript

Question

JavaScript:

function hide_article() {
    var htmlElement = document.getElementsByTagName("article")[0];
    htmlElement.setAttribute("visibility", "hidden");
    console.log("hiding");
};

HTML:

<div id="right-hand-side">
   <img src="resources/Logo.png" onmouseover="hide_article()" onclick="hide_article()"/>
</div>

This function is being called but the article is not being hidden. Any idea why? Cheers.

Mitya · Accepted Answer · 2016-12-21 10:58:02Z

7

Yes - visibility is a CSS rule name, not an HTML attribute.

htmlElement.style.visibility = 'hidden';

Bear in mind, though, that, unless you have good reason to use visibility (and there are some), you'd normally hide elements via display (= 'none') rather than via visibility.

Also, you're assuming that your function will find an element. If it doesn't, your code will error. Best to check this first:

function hide_article() {
    var htmlElements = document.getElementsByTagName("article");
    if (htmlElements.length) { //<-- check before continuing
        htmlElements[0].style.visibility = "hidden";
        console.log("hid element");
    }
};

edited Dec 21, 2016 at 10:58

answered Jul 18, 2014 at 22:19

Mitya

34.7k15 gold badges70 silver badges125 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3164083 Over a year ago

Thanks I will add in that check. Can I do a check to see if it is hidden and change it to visible? I tried this:

function hide_article() { 	var htmlElement = document.getElementsByTagName("article")[0]; 	if (htmlElement.getAttribute('visibility') === 'visible'){     	htmlElement.style.visibility = 'hidden'; 		console.log("hiding") 	} 	else { 		htmlElement.style.visibility = 'visible'; 		console.log("showing") 	} };

webketje Over a year ago

@user3164083 or in short: htmlElement.style.visibility = htmlElement.getAttribute('visibility') === 'visible' ? 'hidden' : 'visible';

Mitya Over a year ago

Once again, you're treating visibility as though it were an attribute. It's not: it's a sub property of the style property. So: htmlElements[0].style.visibility = htmlElements[0].style.visibility == 'hidden' ? 'visible' : 'hidden';

Alexander Vieth · Accepted Answer · 2014-07-18 22:19:25Z

2

This is the statement that you want:

htmlElement.style.visibility = 'hidden';

answered Jul 18, 2014 at 22:19

Alexander Vieth

8766 silver badges9 bronze badges

Collectives™ on Stack Overflow

hide html element using javascript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related