asked on

Java, CSS: Hide two divs and show another

Hi,

I'm fairly new to Javascript. I'm trying to get a link to hide two divs and show another, and then when clicked again it does the reverse. Here's the code I have used so far:

CSS:

#collapseheaders {
      position:absolute;
      background-color:#a7a9ac;
      padding-top:11px;
      bottom:154px;
      width:960px;
      height:21px;
}
#collapsebodies {
      position:absolute;
      background-color:#275cab;
      bottom:0px;
      width:960px;
      height:154px;
}
#justheaders {
      position:absolute;
      background-color:#a7a9ac;
      padding-top:11px;
      bottom:0px;
      width:960px;
      height:21px;
display:none;
}

Java:

<script language="javascript">
function toggleDiv(collapsebodies){
if(document.getElementById(collapsebodies).style.display == 'none'){
document.getElementById(collapsebodies).style.display = 'block';
}else{
document.getElementById(collapsebodies).style.display = 'none';
}
}
function toggleDiv(collapseheaders){
if(document.getElementById(collapseheaders).style.display == 'none'){
document.getElementById(collapseheaders).style.display = 'block';
}else{
document.getElementById(collapseheaders).style.display = 'none';
}
}
</script>

HTML:

<a href="javascript:;" onmousedown="toggleDiv('collapsebodies'); toggleDiv('collapseheaders');">Toggle Div Visibility</a>

Basically the code works the way it should from the site I got it off. I tried to add another toggleDiv('justheaders'); to the onmousedown area, that would show the third div when the other two are hidden. But then it wouldn't work at all.

I'm just not sure exactly why it's not working. Any help would be much appreciated.

Thanks,
Quintin

CEHJ

Try renaming one of the functions

qwerty021600

Although the coding is correct bt give visibility: hidden instead of display and see if it works..

qdh

ASKER

I changed the names, it seems to work a little better. But still not as intended, can you see any problems with my code changes?

I changed the code to the following:

Java:

<script language="javascript">
function toggleDiv1(collapsebodies){
if(document.getElementById(collapsebodies).style.display == 'none'){
document.getElementById(collapsebodies).style.display = 'block';
}else{
document.getElementById(collapsebodies).style.display = 'none';
}
}
function toggleDiv2(collapseheaders){
if(document.getElementById(collapseheaders).style.display == 'none'){
document.getElementById(collapseheaders).style.display = 'block';
}else{
document.getElementById(collapseheaders).style.display = 'none';
}
}
function toggleDiv3(justheaders){
if(document.getElementById(collapsebodies).style.display == 'none' && document.getElementById(collapseheaders).style.display == 'none'){
document.getElementById(justheaders).style.display = 'block';
}else{
document.getElementById(justheaders).style.display = 'none';
}
}
</script>

HTML:

<a href="javascript:;" onmousedown="toggleDiv1('collapsebodies'); toggleDiv2('collapseheaders'); toggleDiv3('justheaders');">Toggle Div Visibility</a>

qdh

ASKER

I also tried the visibility change, it still works in the same way. I basically want it to show justheaders when collapsebodies and collapseheaders are set to none. And then hide it when they are set to block.

jwenting

This is unrelated to Java, I've suggested it be moved to a more appropriate section of the site.

ASKER CERTIFIED SOLUTION

Badotz

membership

This solution is only available to members.

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

Start Free Trial

qdh

ASKER

That still seems to do the same thing Badotz. It's almost like it's running the first two and not the third. Maybe the code is wrong on the third? Also I have set the display to none on the third function in the CSS. So when the page loads initially you see the first two divs. When you click the link the first two disappear, but the third div doesn't seem to show after the link click.

Badotz

The function below might work. Invoke it like this:

<a href="#" onmousedown="toggleDiv('[collapsebodies', 'collapseheaders', ''justheaders']);">Toggle Div Visibility</a>

<script type="text/javascript">
  function toggleDiv(ra) {
    var i = 0,
        elem,
	mode = '';
    
    function $(id) { return document.getElementById(id); }
    
    for (i = 0; i < ra.length; i += 1) {
        elem = $(ra[i]);
        elem.style.display = (elem.style.display !== 'none') ? 'none' : 'block'; // Hide if shown
    }
}

Open in new window

Badotz

You can delete the "mode" var since it is not used (it was in a previous version, but not now).

Make sure you change the "," to a ";" after the "elem" var.

qdh

ASKER

That doesn't seem to do anything when I click the link with that code. Here is what I used:

function toggleDiv(ra) {
var i = 0,
elem;

function $(id) { return document.getElementById(id); }

for (i = 0; i < ra.length; i += 1) {
elem = $(ra[i]);
elem.style.display = (elem.style.display !== 'none') ? 'none' : 'block'; // Hide if shown
}
}

<a href="#" onmousedown="toggleDiv('[collapsebodies', 'collapseheaders', ''justheaders']);">Toggle Div Visibility</a>

Also tried it with the mode, and still didn't seem to do anything :(

Badotz

After

elem = $(ra[i]);

add

alert(elem.id);

to make sure the function is invoked.

It might be due to the "#" href, but I can't be sure...

qdh

ASKER

That still seems to be doing nothing, I tried to changing the link from "#" to "javascript:;" also, and that didn't seem to work either.

Badotz

Does it have to be an <a> element? And does it have to be the "onmousedown" event? I'd use "onclick", but that's just me.

qdh

ASKER

onclick seems to do the same thing as onmousedown. Spose it doesn't have to be an <a> would just be a lot easier that's all. It all seems to working, it's only that last function that doesn't seem to work right. I might just see if I can get the last function working by itself. Then might be able to fix it.

qdh

ASKER

I got it to work!

I changed toggleDiv3 to:

function toggleDiv3(justheaders){
if(document.getElementById(justheaders).style.display == 'block'){
document.getElementById(justheaders).style.display = 'none';
}else{
document.getElementById(justheaders).style.display = 'block';
}
}

from:

function toggleDiv3(justheaders){
if(document.getElementById(collapsebodies).style.display == 'none' && document.getElementById(collapseheaders).style.display == 'none'){
document.getElementById(justheaders).style.display = 'block';
}else{
document.getElementById(justheaders).style.display = 'none';
}
}

I'm not sure why the other one didn't work, logically it should, anyway the other way seems to work.

Thanks for all your help,
Quintin