Show/Hide div

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

In a simple HTML page, index.html, I have:
- 3 anchors: A, B and C;
- 3 divs: dA, dB and dC;

Each anchor should load, when clicked, index.html but anchor A should
make dA visible and the other invisible, anchor B should show dB and
hide the others.

How can I do this?


Re: Show/Hide div

Quoted text here. Click to load it

This was tested very quickly but works in IE 7.

It uses Javascript but you didn't specify a scripting language of

<html lang=3D"en">
<title>Dynamic Java Querystring</title>
<script type=3D"text/javascript">
    function querySt(param) {
        var loc =;
        var query = loc.split("&");
        for (i=3D0;i<query.length;i++) {
            var currParam = query[i].split("=3D");
            if (currParam[0] =3D param) {
            return currParam[1];
<a href=3D"test.htm?q=3DDa">A</a>
<a href=3D"test.htm?q=3DDb">B</a>
<a href=3D"test.htm?q=3DDc">C</a>
<div id=3D"Da" style=3D"visibility: hidden;">
<p>Div A</p>
<div id=3D"Db" style=3D"visibility: hidden;">
<p>Div B</p>
<div id=3D"Dc" style=3D"visibility: hidden;">
<p>Div C</p>
<script type=3D"text/javascript">
    document.getElementById(querySt('q')).style.visibility = 'visible';

Re: Show/Hide div

Quoted text here. Click to load it

HTML-style comment delimiters should not be used inside script

Quoted text here. Click to load it

That is incorrect even if the comment delimiters were useful, it
should be:


Quoted text here. Click to load it

The problem with this approach is that if the user has scripting
disabled, or it isn't supported, they will not see any content.  Much
better to use the HTML class attribute to associate visibility, then
use script to load the relevant style sheet to set the applicable rule
and hide the elements.


Site Timeline