Solved

Java, CSS: Hide two divs and show another

Posted on 2009-07-14
16
258 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
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
 

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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

746 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now