This javascript function is not defined? How can I fix it?
<p>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).</p>

<p>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).</p>

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

<pre><code>   $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();';
</code></pre>

<p>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.</p>

<p>Thanks!!</p>

<p>UPDATE:</p>

<p>This is the output that hides or shows:</p>

<pre><code>    &lt;fieldset class=" collapsible"&gt;
&lt;legend&gt;
&lt;a href="#"&gt;Matriz de Gastos&lt;/a&gt;
&lt;/legend&gt;
&lt;div&gt;
&lt;div class="form-item"&gt;
&lt;label style="display: none;"&gt;
Gastos por
&lt;em&gt;Departamento&lt;/em&gt;
:
&lt;/label&gt;
&lt;div class="form-checkboxes tipo-uf-131 fila-matriz-gastos hidden" style="display: none;"&gt;
&lt;div id="edit-matriz-gastos-131--1-wrapper" class="form-item"&gt;
&lt;label class="option" for="edit-matriz-gastos-131--1"&gt;
&lt;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;"&gt;
Seleccionar/deseleccionar todos
&lt;/label&gt;
&lt;/div&gt;
&lt;div id="edit-matriz-gastos-131-108-wrapper" class="form-item"&gt;
&lt;label class="checkbox" for="edit-matriz-gastos-131-108"&gt;
&lt;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]"&gt;
Gas
&lt;/label&gt;
&lt;/div&gt;
</code></pre>

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

<p>Checked:</p>

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

<p>Unchecked:</p>

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

<p>AND ANOTHER UPDATE:</p>

<p>Here´s what I´ve found at <a href="http://docs.jquery.com/Hide" rel="nofollow">jQuery docs</a>:</p>

<blockquote>
  <p>Hide .hide() function - DOM manipulation</p>
  
  <p>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.</p>
  
  <p>Example</p>
  
  <p><code>$("#class_div").hide();</code></p>
  
  <p>Before
      <code>&lt;div id='class_div'&gt;Hello world&lt;/div&gt;   &lt;div id='class_div_2'&gt;Hello world&lt;/div&gt;</code></p>
  
  <p>After:
      <code>&lt;div id='class_div' style="display:none;"&gt;Hello world&lt;/div&gt;   &lt;div id='class_div_2'&gt;Hello world&lt;/div&gt;</code></p>
</blockquote>
