7

I am using the following code to toggle visibility of a div area:

 <script type="text/javascript">
function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}
 </script>

To toggle it, I am using onclick="toggle_visibility('id_of_element_to_toggle');"

The part that I don't like is that this makes it visible by default when the page loads. How can I make it hidden by default until it is toggled to be visible? I'd like to do this in the same javascript block if possible. The simpler the better.

How can I toggle the visibility of 2 divs at once? To make them switch.

4
  • You're looking for CSS, not JS to have it hidden by default...
    – Ian
    Oct 3, 2013 at 15:38
  • 4
    Use CSS, display: none, no need for Javascript here
    – Pekka
    Oct 3, 2013 at 15:38
  • so if I just do style="display:none" in the div tag that should do it?
    – Arringar1
    Oct 3, 2013 at 15:39
  • could you kindly accept an answer?
    – Brenden
    Oct 11, 2013 at 20:05

5 Answers 5

9

You need to call it:

<script type="text/javascript">

toggle_visibility('id_of_element_to_toggle');

function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}
 </script>

You could add some CSS too:

#id_of_element_to_toggle{display:none;}

Performance will be faster with CSS.

2
  • 1
    +1 this actually answers the OP's question along with providing the better css alternative Oct 3, 2013 at 15:42
  • looks like all the answers answer the question, just with different levels of detail.
    – Brenden
    Oct 3, 2013 at 16:41
8

In cases such as this I hide the div using css, either inline or in the stylesheet, so that it is hidden by default.

<div style="display:none;"> 

Or, you could load the div without content, then populate it via your javascript with e.innerHTML="some content" or ajax?

6

since you're using CSS to toggle it, you should use CSS to set its initial state: display:none either inline in the style attribute or ideally in a global stylesheet.

4

The most simple option is to set this in the CSS, then it will truly be set as hidden from the moment that the style is applied by the browser, before your Javascript is executed:

div.item_name { display: none; }
2

try this

  <!DOCTYPE html>
    <html>
    <body>
    <script type="text/javascript">
        function toggle_visibility(id) {
           var e = document.getElementById(id);
           if(e.style.display == 'block')
              e.style.display = 'none';
           else
              e.style.display = 'block';
        }
    </script>
    <a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
    <div id="foo" style="display:none">toggle visibility.</div>


    </body>
    </html>
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.