Question

$("#btnCon").click(function() {
    $('#con').slideToggle('slow');
    $('.tgg:not(#con)').hide(); 
});

When I place this code in the head of html – it doesn’t work.
In the body – it works.
In a separate file – it doesn’t work.
Where is the secret ?

Answer 1

To make it work in head do this :

$(function(){
  $("#btnCon").click(function() {
    $('#con').slideToggle('slow');
    $('.tgg:not(#con)').hide(); 
  });
});

The problem was that you were looking for the element with id btnCon before it was ready. The usual solution is to embed the code in this callback that jQuery calls when the DOM is ready.

But note that even while using $(function(){ ... }); is always recommended, the best practice is generally to put your code either

• in a separate javascript file
• in a script element at the end of the body