How do I show/hide elements on a page using jquery?

Question

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(&$form, &$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

Answer 1

For Drupal 7

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

Working with JavaScript and jQuery

Answer 2

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 < checkboxes.length; i++) {
        jQuery(checkboxes[i]).hide();
    }