Question

I´ve got this code inside a php file. It should show and hide a piece of html stuff according to specific parameters (I have a set of checkboxes and if you check them, some stuff appears or hides according to wich checkbox it is).

Now, after getting many errors because of my stylesheet, and after stripping it off, I still get this one: “hide is not defined” in firefox error console (I´ve tried the error console in firebug, and shows nothing).

This is the code, and I don´t understand how hide could be not defined:

   $script =
  $("input[id^=\'edit-field-tipos-unidades-disponible-value\']").change(function(){' .
    $(".fila-matriz-gastos").hide();' .
    $(".fila-matriz-gastos").prev("label").hide();' .
    $("input[id^=\'edit-field-tipos-unidades-disponible-value\'][checked]").each(function(){' .
      var tipo = $(this).val();' .
      $(".tipo-uf-" + tipo).show();' .
      $(".tipo-uf-" + tipo).prev().show();' .
      $("input.tipo-uf-"+tipo+"[value=-1]").click(function(){' .
        $("input.tipo-uf-" + tipo).attr("checked", $(this).attr("checked"));' .
      });' .
    });' .
  }).change();';

I´m pretty much at a loss here, because I want to theme the output, but I don´t understand much of how javascript works.

Thanks!!

UPDATE:

This is the output that hides or shows:

    <fieldset class=" collapsible">
<legend>
<a href="#">Matriz de Gastos</a>
</legend>
<div>
<div class="form-item">
<label style="display: none;">
Gastos por
<em>Departamento</em>
:
</label>
<div class="form-checkboxes tipo-uf-131 fila-matriz-gastos hidden" style="display: none;">
<div id="edit-matriz-gastos-131--1-wrapper" class="form-item">
<label class="option" for="edit-matriz-gastos-131--1">
<input id="edit-matriz-gastos-131--1" class="form-checkbox tipo-uf-131 fila-matriz-gastos hidden" type="checkbox" value="-1" name="matriz_gastos[131][-1]" style="display: none;">
Seleccionar/deseleccionar todos
</label>
</div>
<div id="edit-matriz-gastos-131-108-wrapper" class="form-item">
<label class="checkbox" for="edit-matriz-gastos-131-108">
<input id="edit-matriz-gastos-131-108" class="form-checkbox tipo-uf-131 fila-matriz-gastos hidden" type="checkbox" value="108" name="matriz_gastos[131][108]">
Gas
</label>
</div>

And this is is a checkbox that hides or shows the stuff, according to click on it or not:

Checked:

<label style="display: block;"><label style="display: block;">
Gastos por
<em>Departamento</em>
:
</label>
<div class="form-checkboxes tipo-uf-131 fila-matriz-gastos hidden" style="display: block;">

Unchecked:

<label style="display: none;">
Gastos por
<em>Departamento</em>
:
</label>
<div class="form-checkboxes tipo-uf-131 fila-matriz-gastos hidden" style="display: none;">

AND ANOTHER UPDATE:

Here´s what I´ve found at jQuery docs:

Hide .hide() function – DOM manipulation

This function hide the matching elements on the page. What it does is
to set the display configuration to ‘none’. You can set a speed for
the disappearance ‘fast’, ‘normal’ or ‘slow’ and a callback function
being executed after the affect is allowed.

Example

$("#class_div").hide();

Before
<div id='class_div'>Hello world</div> <div id='class_div_2'>Hello world</div>

After:
<div id='class_div' style="display:none;">Hello world</div> <div id='class_div_2'>Hello world</div>

Answer 1

.hide is probably a jQuery function. I think you removed jQuery from the page. In FireBug, got to the scripts tab and look for jQuery in the loaded files. Do you see it?