How do I show/hide elements on a page using jquery? I am trying to hide check-box selectors in the custom search module when the page initially loads and then have a clickable link to show them. I have the clickable link working but the check-boxes are initially in a visible state. How can I hide the check boxes when the page/module loads? I tried placing the following code in my THEME_form_alter(&amp;$form, &amp;$form_state, $form_id) function

drupal_add_js('jQuery(document).ready(function () { $("#edit-custom-search-types")[0].hide(); });', 'inline');


and 

drupal_add_js('jQuery(document).ready(function () { $("#edit-custom-search-types").hide(); });', 'inline');


But neither worked. Any help would be appreciated. thanks
the easiest way of adding custom javascript-snippets is to create a custom.js file in your themefolder and declare it in your theme.info file like scripts[] = custom.js. Add all your snippets there.

In your JS file you can hide the elements. 
If you have multiple checkboxes create an array and hide them with a for each loop.

example

// create array with stuff you want to hide
    checkboxes = [
        '#checkbox1',
        '#checkbox2',
    ];

// Hide arrays
    for (i = 0; i &lt; checkboxes.length; i++) {
        jQuery(checkboxes[i]).hide();
    }