Hide HTML elements without javascript, only CSS

Question

I have an html document with many elements like this

<article class=slide id=s4>
<h1></h1>

<p></p>
</article>

All I want to do is when the link becomes www.mylink.com#s4 then only the article with id=s4 to be appeared. And the other to dissapear. I know about the display:none; property-value but I dont know how to switch this value without javascript.

Thanks in advance...

SLaks · Accepted Answer · 2011-12-13 16:15:10Z

9

In (IE < 9 ∉ modern browsers), you can use the :target pseudo-class:

section {
    display: none;
}
section:target {
    display: block;
}

This pseudo-class matches the element that is referenced in the URL fragment.

For non-browsers, you can use conditional comment classes to show all of the sections and a warning message:

.lt-ie9 section {
    display: block;
}
.ie-warning {
    display: none;
}
.lt-ie9 .ie-warning {
    display: block;
}

(or just use Javascript)

edited Dec 13, 2011 at 16:15

answered Dec 4, 2011 at 16:14

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

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

1 Comment

py_script Over a year ago

I think I will use Chrome...so, with only these 2 rules I will have the desired functionality?

Liam Cain · Accepted Answer · 2011-12-04 16:29:22Z

1

You'll most likely want to use the :target pseudo class selector. Check out this page from css-tricks. It also includes a way to do this without :target so that it works in IE7+ (if that's important to you).

answered Dec 4, 2011 at 16:29

Liam Cain

13.4k5 gold badges41 silver badges29 bronze badges

Comments

Tom Walters · Accepted Answer · 2011-12-04 16:16:09Z

-1

You first need to set your CSS like so:

article { display:none; }

And then have this JavaScript:

var id = document.location.hash.replace('#','');

if(document.location.hash != ''){
    document.getElementById(id).style.display = 'block';
}

Just remember, users without JavaScript turned on won't see anything at all!

answered Dec 4, 2011 at 16:16

Tom Walters

15.6k7 gold badges59 silver badges75 bronze badges

Collectives™ on Stack Overflow

Hide HTML elements without javascript, only CSS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related