Div's visibility with javascript - problem

Posted by sammville on Stack Overflow See other posts from Stack Overflow or by sammville
Published on 2011-01-09T01:10:03Z Indexed on 2011/01/09 1:54 UTC
Read the original article Hit count: 224

Filed under:
|

I am trying to use div's to display content on my page. This is controlled with an onchange element in a select menu. It works perfectly but the problem is I want one div to close when another one is opened. The div's open fine but it does not close the others. An example code is below. What am I doing wrong?

JavaScript:

if(document.getElementById('catgry').value == '01'){
    document.getElementById('post04').style.visibility = "visible";
    document.getElementById('post04').style.display = "";

    document.getElementById('post07').style.visibility = "hidden";
    document.getElementById('post07').style.display = "none";
}else if(document.getElementById('catgry').value == '02'){
    document.getElementById('post02').style.visibility = "visible";
    document.getElementById('post02').style.display = "";

    document.getElementById('post04').style.visibility = "hidden";
    document.getElementById('post04').style.display = "none";

    document.getElementById('post07').style.visibility = "hidden";
    document.getElementById('post07').style.display = "none";
}

HTML:

<div id="post04" style="visibility:hidden; display:none;">
  <table  class="posttb"><tr>
    <td width="30%">Author</td>
    <td><input type="text" name="author" size="30" class="postfd"></td>
  </tr>
 </table>

 </div>

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about css