JavaScript: How to Hide / Unhide

Question

I'm trying to avoid using innerHTML because it causes my browser to crash, probably due to the 250 milliseconds refresh rate.

Anyway, I would rather have some content in an hidden <div> and make the <div> visible only if a certain condition is met. What's the best approach to go around this?

Basically, what I'm doing now is..

setInterval(function () {
    if (serverReachable()) {
        .... // lines of code
        .... // lines of code
    var changeIt = document.getElementById('change')
    changeIt.innerHTML = '';
           timeout = setInterval(function(){window.location.href = "Tracker.html";},5000);
        }
    } else {
        clearTimeout(timeout);
        timeout = null;
    var changeIt = document.getElementById('change')
    changeIt.innerHTML = 'offline';
   }
}, 250);

This will crash my browser, because I'm not using innerHTML to print "offline" but a whole <div>. I want to have this <div> hidden, and instead of using innetHTML, to simply unhide if a condition is met (in this case, no internet connection).

I would change the `setInterval()` to a recursively called `setTimeout()` - this shouldn't be crashing your browser. Certainly the inner `setInterval` should be a `setTimeout` - one time event. — MrWhite, Dec 30 '12 at 17:48

score 12 · Accepted Answer · answered Dec 30 '12 at 17:40

12

Then use CSS to hide and unhide the div. You can do something like this:

    changeIt.style.visibility = 'hidden';

to make the div disappear. And

   changeIt.style.visibility = 'visible';

to show it again.

answered Dec 30 '12 at 17:40

Vincent Ramdhanie

102,349
23
137
192

4

@EliUnger: It should be noted that hiding an element with `visibility` still occupies the space on the page, whereas `display = 'none'` essentially removes it - which you use is dependent on your situation. – MrWhite Dec 30 '12 at 17:51

score 7 · Answer 2 · answered Dec 30 '12 at 17:39

7

Set the display CSS property of the div to none.

https://developer.mozilla.org/en-US/docs/CSS/display

Example of setting it programmatically with Javascript: http://jsbin.com/ezanuv/1/edit

answered Dec 30 '12 at 17:39

jonvuri

5,738
3
24
32

I'm aware of the display property - but how can I set the DIV to display: none if a condition is met? Basically, using JavaScript. – Homie Dec 30 '12 at 17:40
@EliUnger, I've added an example. There are many ways to do it; this is one. (Note that querySelector is just a way to get a DOM element; getElementById works just as well.) – jonvuri Dec 30 '12 at 17:42
@EliUnger: `changeIt.style.display = 'none';` – MrWhite Dec 30 '12 at 17:43
Thx, looks like you and Vincent have the same answer :-) I appreciate your help. – Homie Dec 30 '12 at 17:52
@EliUnger, Actually, we don't. See w3d's comment on Vincent's answer. – jonvuri Dec 30 '12 at 18:12

score 6 · Answer 3 · answered Jul 23 '14 at 01:05

I prefer using css display property. I have a running code which I wrote recently. Its very simple and scalable as well.

  <HEad>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script> 
       $(document).ready(function() {
         $.setDisplay = function (id){
           if($("#" + id ).css('display') == 'none'){
             $("#" + id ).css('display', 'block');
           }
           else
           if($("#" + id ).css('display') == 'block'){
             $("#" + id ).css('display', 'none');
           }
         }

         $('*[id^="divheader"]').click(function (){
            $.setDisplay($(this).data("id"));
         });
       });
     </script>
  </HEad>        

<div id='divheader-div1' data-id='div1'>
  This is the header Click to show/unshow
</div>
<div id='div1' style='display: block'>
  <div>
    <label for="startrow">Retail Price:</label>
    <input type="text" name="price" id="price" value=""><small></small>
  </div>
</div>

<div id='divheader-div2' data-id='div2'>
 This is the header Click to show/unshow
</div>
<div id='div2' style='display: none'>
 <div>
   <label for="startrow">Division:</label>
   <input type="text" name="division" id="division" value=""><small> </small>
 </div>
</div>

score 3 · Answer 4 · answered Dec 30 '12 at 17:41

3

You could either set the display property to none or the visibility property to hidden.

answered Dec 30 '12 at 17:41

Victor Zamanian

3,100
24
31

score 0 · Answer 5 · answered Jan 20 '13 at 19:20

0

The best way is to set the display none for hidden and block for visible

//the element is the div you want to hide or display

element.style.display = (element.style.display == "block") ? "none": "block";

answered Jan 20 '13 at 19:20

user1995240

1

JavaScript: How to Hide / Unhide

5 Answers5

Linked