Solved

Java, CSS: Hide two divs and show another

Posted on 2009-07-14
16
268 Views
Last Modified: 2012-05-07
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
0
Comment
Question by:qdh
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
16 Comments
 
LVL 86

Expert Comment

by:CEHJ
ID: 24848420
Try renaming one of the functions
0
 
LVL 13

Expert Comment

by:qwerty021600
ID: 24848481
Although the coding is correct bt give visibility: hidden instead of display and see if it works..
0
 

Author Comment

by:qdh
ID: 24848518
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:qdh
ID: 24848568
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
 
LVL 6

Expert Comment

by:jwenting
ID: 24848949
This is unrelated to Java, I've suggested it be moved to a more appropriate section of the site.
0
 
LVL 29

Accepted Solution

by:
Badotz earned 500 total points
ID: 24849123
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
 

Author Comment

by:qdh
ID: 24849684
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
 
LVL 29

Expert Comment

by:Badotz
ID: 24849998
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
 
LVL 29

Expert Comment

by:Badotz
ID: 24850018
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
 

Author Comment

by:qdh
ID: 24854794
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
 
LVL 29

Expert Comment

by:Badotz
ID: 24855065
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
 

Author Comment

by:qdh
ID: 24855192
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
 
LVL 29

Expert Comment

by:Badotz
ID: 24855309
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
 

Author Comment

by:qdh
ID: 24855374
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
 

Author Comment

by:qdh
ID: 24855608
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Get Text of Select using class name ***JavaScript Only*** 3 29
Call a VB.net function in Javascript 6 44
Javascript question 8 39
Conformation code 4 31
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question