asked on

Javascript show/hide feature help

Hi, I am having some problems getting some javascript to work properly for a navigation system on my website... at present I have....

<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>

Open in new window

Div "content1" is displayed when the page is loaded, the others are hidden. I have done this using 'display:block' and 'display:none' css rules.

#content1 {
	display: block;
}
#content2 {
	display: none;
}
#content3 {
	display: none;
}

Open in new window

I then have the following links:

<a href="javascript:void(0)" onclick="showhide('content1');" >Content 1</a>
<a href="javascript:void(0)" onclick="showhide('content2');" >Content 2</a>
<a href="javascript:void(0)" onclick="showhide('content3');" >Content 3</a>

Open in new window

with the following javascript:

var divState = {}; 
function showhide(id) {
    if (document.getElementById) {
        var divid = document.getElementById(id);

        divState[id] = (divState[id]) ? false : true; 
        for (var div in divState){
            if (divState[div] && div != id){ 
                document.getElementById(div).style.display = 'none'; 
                divState[div] = false; 
            }
        }
        divid.style.display = (divid.style.display == 'block' ? 'none' : 'block');
    }
}

Open in new window

The idea is that, when the link relating to each div is clicked on only that div is displayed, the others get hidden. The problem with this current script is that on first use, the div that is displayed on page load does not dissapear. Also, when a link is clicked on twice the div dissapears altogether.

Basically, is there anyway to adjust this javascript so that it first hides the div that is already displayed, but also not hide a div if the user clicks the same link twice.

I am inclined to think the best bet would be to use another script that uses classnames, but having tried cannot find one to work.

Any help would be appreciated.

- Rob

leakim971

Test page : http://jsfiddle.net/97bgR/

rob22888

ASKER

Hi, thanks for your response.

It works, however, it is not quite what I am looking for. I realise and apologise for the fact I did not mention this in the original post, but there are mulitple sections on the webpage where content will need to be 'toggled'. Therefore, I need a script that is adaptable, hence why i currently have a script which uses the 'onclick' bit in the link.

I needs to work a bit like this, unless you far more qualified JS programmers have a better solution.... I have written it in pseudocode:

Gather class name of all relevant divs & id of div to be displayed

If (div with certain id is already set to 'display:block')
         do nothing
else 
          set all divs with certain class name to 'display:none'
          display div with certain id to 'block'

Open in new window

Also, when the user clicks the link it must not jump back to the top of the page in any circumstances, that is why my links currently use 'javascript:void(0)' rather than the hashtag.

ASKER CERTIFIED SOLUTION

smeghammer

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial