Hide HTML Elements Without Javascript, Only CSS

I have an html document with many elements like this

All I want to do is when the lin

Solution 1:

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)

Solution 2:

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).

Solution 3:

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!