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

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.