show/hide div using toggle function onclick?

Question

I am trying to show a div using javascript when a user clicks on another div.

Here is my code, its working fine, except, I need it to work the other way around. The div is visible on load and hidden once the user clicks the other div.

<div id="content_nav">
  <div class="login_heading">Logged in as, <strong><?php echo $_SESSION['user'];?>>/strong>, <a href="logout.php">Logout</a></div>
  <div class="control_panel">
    <div id="ctrl1" onclick="toggle();"></div>
    <p class="control">(0) Messages</p>
    <div id="msg_menu"></div>

    <script>
     var toggle = function() {
       var mydiv = document.getElementById('msg_menu');
       if (mydiv.style.display === 'none' || mydiv.style.display === '')
         mydiv.style.display = 'block';
       else
         mydiv.style.display = 'none'
     }
    </script>

css:

#msg_menu{
   margin:auto;
   width:990px;
   height:200px;
   background:#000;
}

You must register and unregister click event handler. Consider using jquery `on` and `off`. — px5x2, May 07 '14 at 10:26
of course, here is with pure javascript: http://stackoverflow.com/questions/9800310/add-event-handler-to-html-element-using-javascript — px5x2, May 07 '14 at 10:42

score 0 · Answer 1 · answered May 07 '14 at 11:07

Modify your css such, that the element is hidden by default. It can then be toggled on/off by the user as required.

#msg_menu{
   margin:auto;
   width:990px;
   height:200px;
   background:#000;
   display:none;
}

Alternatively, if you prefer a javascript solution, then you can hide the element when it's loaded.

show/hide div using toggle function onclick?

1 Answers1