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
qdhAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

CEHJCommented:
Try renaming one of the functions
0
qwerty021600Commented:
Although the coding is correct bt give visibility: hidden instead of display and see if it works..
0
qdhAuthor Commented:
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>
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

qdhAuthor Commented:
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.
0
jwentingCommented:
This is unrelated to Java, I've suggested it be moved to a more appropriate section of the site.
0
BadotzCommented:
Minor change:

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

becomes

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
qdhAuthor Commented:
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.
0
BadotzCommented:
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

0
BadotzCommented:
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.
0
qdhAuthor Commented:
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 :(
0
BadotzCommented:
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...
0
qdhAuthor Commented:
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.
0
BadotzCommented:
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.
0
qdhAuthor Commented:
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.
0
qdhAuthor Commented:
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
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.