I am working with hiding and showing divs in javascript, basically I want to show one div, then when a button is clicked hide that div and show another. I can't quite figure the javascript out here's what I have at the moment but the second layer isnt showing when I click hide.

  <script language=javascript type='text/javascript'> 
    function hidediv() { 
    if (document.getElementById) { // DOM3 = IE5, NS6 
    document.getElementById('layer').style.visibility = 'hidden'; 
    document.getElementById('topbar').style.visibility = 'visisble';
    } 
    else { 
    if (document.layers) { // Netscape 4 
    document.layer.visibility = 'hidden'; 
    document.topbar.visibility = 'visible'; 

    } 
    else { // IE 4 
    document.all.layer.style.visibility = 'hidden'; 
    document.all.topbar.style.visibility = 'visible'; 
    } 
    } 
    }

    function showdiv() { 
    if (document.getElementById) { // DOM3 = IE5, NS6 
    document.getElementById('layer').style.visibility = 'visible'; 
 document.getElementById('topbar').style.visibility = 'hidden';
    } 
    else { 
    if (document.layers) { // Netscape 4 
    document.layer.visibility = 'visible'; 
document.topbar.visibility = 'hidden'; 
    } 
    else { // IE 4 
    document.all.layer.style.visibility = 'visible'; 
document.all.topbar.style.visibility = 'hidden';
    } 
    } 
    } 
    </script>

and css:

 #topbar {
    background-image: url(images/back.png);
background-repeat: repeat;
height: 30px;
margin-top: 20px;
visibility: hidden;
}

#show {
    float: right;
    padding-right: 40px;
    padding-top: 10px;
}

#hide {
    float: right;
    padding-right: 40px;
}

#layer {
background-image: url(images/back.png);
background-repeat: repeat;
padding-left: 20px;
padding-bottom:20px;
overflow: auto;
}

using standard html links like:

<a href="javascript:hidediv()">Hide</a>

Any help would be appreciated, cheers!

EDIT

okay switched to something pletely new but it seems to not show after hiding

<script type="text/javascript">

$(function(){ $('#showhide').click(function(){ $('#layer').toggle(); $('#topbar').toggle(); }); });

and

<a href="javascript:void(0);" id="showhide">Show/Hide</a>

and

<div id="layer"></div>

I am working with hiding and showing divs in javascript, basically I want to show one div, then when a button is clicked hide that div and show another. I can't quite figure the javascript out here's what I have at the moment but the second layer isnt showing when I click hide.

  <script language=javascript type='text/javascript'> 
    function hidediv() { 
    if (document.getElementById) { // DOM3 = IE5, NS6 
    document.getElementById('layer').style.visibility = 'hidden'; 
    document.getElementById('topbar').style.visibility = 'visisble';
    } 
    else { 
    if (document.layers) { // Netscape 4 
    document.layer.visibility = 'hidden'; 
    document.topbar.visibility = 'visible'; 

    } 
    else { // IE 4 
    document.all.layer.style.visibility = 'hidden'; 
    document.all.topbar.style.visibility = 'visible'; 
    } 
    } 
    }

    function showdiv() { 
    if (document.getElementById) { // DOM3 = IE5, NS6 
    document.getElementById('layer').style.visibility = 'visible'; 
 document.getElementById('topbar').style.visibility = 'hidden';
    } 
    else { 
    if (document.layers) { // Netscape 4 
    document.layer.visibility = 'visible'; 
document.topbar.visibility = 'hidden'; 
    } 
    else { // IE 4 
    document.all.layer.style.visibility = 'visible'; 
document.all.topbar.style.visibility = 'hidden';
    } 
    } 
    } 
    </script>

and css:

 #topbar {
    background-image: url(images/back.png);
background-repeat: repeat;
height: 30px;
margin-top: 20px;
visibility: hidden;
}

#show {
    float: right;
    padding-right: 40px;
    padding-top: 10px;
}

#hide {
    float: right;
    padding-right: 40px;
}

#layer {
background-image: url(images/back.png);
background-repeat: repeat;
padding-left: 20px;
padding-bottom:20px;
overflow: auto;
}

using standard html links like:

<a href="javascript:hidediv()">Hide</a>

Any help would be appreciated, cheers!

EDIT

okay switched to something pletely new but it seems to not show after hiding

<script type="text/javascript">

$(function(){ $('#showhide').click(function(){ $('#layer').toggle(); $('#topbar').toggle(); }); });

and

<a href="javascript:void(0);" id="showhide">Show/Hide</a>

and

<div id="layer"></div>

• javascript
• html
• hide
• show
• layer

• 1 I would strongly advise you to use jQuery to avoid the necessity to check for browser etc. It will certainly shorten your code, making it clearer and easier for you to debug. – pimvdb Commented Mar 16, 2011 at 15:44
• Sadly, jquery isnt patible with IE4 either. And i would suggest not supporting such old browsers. – TJHeuvel Commented Mar 16, 2011 at 15:50
• I can't help you with your question, but the BBC's Glow library seems to be patible with the older generations of browsers. – David Thomas Commented Mar 16, 2011 at 16:43
• 1 @Amy IE4? The one released in 1997 with Win 98? I'm pretty sure that no-one uses that version anymore. – Šime Vidas Commented Mar 16, 2011 at 16:45
• yes iv changed the code now to above but having small problem making it show – Amy Commented Mar 16, 2011 at 16:47

2 Answers 2

You dont need jQuery for this.

Your functions could look like this:

function hideElement(elementId)
{
 document.getElementById(elementId).style.display = 'none';
}
function showElement(elementId)
{
 document.getElementById(elementId).style.display = 'block';
}

Then on page load, or in the css you can hide the first div. When the click happens you can then use showElement to show it.

This will probably help you: http://api.jquery./hide/ or the http://api.jquery./toggle/.

EDIT:

I am hoping that following example will help you.

<!DOCTYPE html>
<html>
<head>
  <script language="javascript" type="text/javascript" src="jquery.js"></script>
  <script language="javascript" type="text/javascript">
  $(document).ready(function(){

    $("#button").click(function(){

         $("#a").toggle();
         $("#b").toggle();

     });

  });
  </script>
</head>
<body>
  <div id="a">
    I am a.
  </div>

  <div id="b" style="display: none">
  I am b.
  </div>

  <div id="button">
    <button>Show/Hide</button>
  </div>
</body>

</html>