Jquery Code help

Question

I wrote a jquery script:

$(document).ready(function(){  
$("#category").click(function(){  
    $("#category_menu").slideToggle(1000);  
    });  
  $("body").click(function(){  
    $("#category_menu").hide();  
  });  
});

My Question is, is there any way to reduce the size to look more "professional" ?

Answer 1

Anything clicked on that's not #category will hide #category_menu. You also don't need document ready function if you place your jQuery just before </body>

$("#category, html").click(function(e) {
    e.stopPropagation();
    this.id == 'category' ? $("#category_menu").slideToggle(1000) : $("#category_menu").hide();
});

Check working example at http://jsfiddle.net/QDfnh/1/

Answer 2

First you should use the document.ready shortcut and alias jQuery to $ to allow cross-library support, and you can store the #category_menu lookup to expedite the functions. But really your code is fine as-is.

jQuery(function($){
  var $cm = $('#category_menu');
  $('#category').click(function(){
    $cm.slideToggle(1000);
  });
  $('body').click(function(){
    $cm.hide();
  });
});

Answer 3

the only way i can see to reduce it is to do:

$(function(){  
   $("#category").click(function(){  
       $("#category_menu").slideToggle(1000);  
    });  
    $("body").click(function(){  
       $("#category_menu").hide();  
    });  
});