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 bees www.mylink#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...

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 bees www.mylink.#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...

• javascript
• css
• slideshow
• show-hide

3 Answers 3

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

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

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!