Showing/hiding <div> using javascript

Question

For example I have a function called showcontainer . When I click on a button activating it, I want a certain div element, in this case <div id="container"> , to fade in. And when I click it again, fade out. How do I achieve this?

Note: I am not accustomed with jQuery.

Answer 1

So you got a bunch of jQuery answers. That's fine, I tend to use jQuery for this kind of stuff too. But doing that in plain JavaScript is not hard, it's just a lot more verbose:

var container = document.getElementById('container');
var btn = document.getElementById('showcontainer');

btn.onclick = function() {

    // Fade out
    if(container.style.display != 'none') {
      var fade = setInterval(function(){
        var opacity = parseFloat(container.style.opacity);
        opacity = isNaN(opacity) ? 100 : parseInt(opacity * 100, 10);
        opacity -= 5;
        container.style.opacity = opacity/100;
        if(opacity <= 0) {
          clearInterval(fade);
          container.style.opacity = 0;
          container.style.display = 'none';
        }
      }, 50);

    // Fade in
    } else {
      container.style.display = 'block';
      container.style.opacity = 0;
      var fade = setInterval(function(){
        var opacity = parseFloat(container.style.opacity);
        opacity = isNaN(opacity) ? 100 : parseInt(opacity * 100, 10);
        opacity += 5;
        container.style.opacity = opacity/100;
        if(opacity >= 100) {
          clearInterval(fade);
          container.style.opacity = 1;
        }
      }, 50);
    }

};

Check the working demo .

Answer 2

Best thing you could do is start now and get accustomed to jQuery.

The page http://api.jquery.com/fadeIn/ has all the example code that could be written here. Basically you want to have the call to fadeIn in your showcontainer function.

function showcontainer() {
    $('#container').fadeIn();
}

Answer 3

Provided you're not opposed to using jQuery per se, you can achieve this easily:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $('#showcontainer').click(function() {
            $('#container').fadeToggle();
        });
    });
</script>
...
<div id="container">
...
</div>
...

<input type="button" id="showcontainer" value="Show/hide"/>
...

Note the missing http: in the beginning of the source of jQuery. With this trick the browser will automatically use http: or https: based on whether the original page is secure.

The piece of code after including jQuery assigns the handler to the button.

Answer 4

You can have a look at jQuery UI Toggle .

The documentation turns the use of the library very simple, and they have many code examples.

Answer 5

You'd be as well off learning jQuery as it makes it a lot easier to do things!

From the sounds of it, you could have the container div already in the HTML but with a style of "display:none;", and then simply show it in your click event using ( jQuery ):

$('#container').fadeIn('slow', function() {
    //Any additional logic after it's visible can go here
  });