title: How exactly does this JQuery script work? and how can I modify it to select a specific object?
body: <p>I am absolutly new in JavaScript and jQuery and I have the following problem.</p>
  
  <p>I have the following jQuery script:</p>
  
  <pre><code>$(document).ready(function () {
          $("thead.opening").click(function () {
              $(this).next().slideToggle('slow', function () {
                  $(this).prev("thead.opening").toggleClass("active");
                  $("thead.opening").find(".imgAccordion").attr("src", "img/arrow.gif");
                  $("thead.active").find(".imgAccordion").attr("src", "img/arrow_down.gif");
              });
              return false;
          });
      });
  </code></pre>
  
  <p>and in my HTML I have something like this:</p>
  
  <pre><code>&lt;table class="standard-table-cls table-header-cls"&gt;
          &lt;thead class="opening active"&gt;
          &lt;tr&gt;
              &lt;th&gt;
                  &lt;img class="imgAccordion" src="img/arrow_down.gif"/&gt;
                  Ricerca Flussi (la funzione e' consentita per flussi inferiori alle 300 fatture)
              &lt;/th&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;tbody class="expanded"&gt;
              &lt;tr&gt;
                  &lt;td style="width: 100em;"&gt;
                      SHOW SOMETHING
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
  &lt;/table&gt;
  
  ...........................................................
  ...........................................................
  ...........................................................
  
  
  &lt;table class="standard-table-cls table-header-cls"&gt;
  
      &lt;thead class="opening"&gt;
          &lt;tr&gt;
              &lt;th&gt;
                 &lt;img class="imgAccordion" src="img/arrow.gif"/&gt;
                 Ricerca Fatture
              &lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;tbody class="expanded" style="display: none;"&gt;
          &lt;tr&gt;
              &lt;td style="width: 100em;"&gt;
                   SHOW SOMETHING ELSE
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  
  &lt;table&gt;
  </code></pre>
  
  <p>As you can see in my code there is 2 different tables both having the same classes (<code>standard-table-cls table-header-cls</code>).</p>
  
  <p>When I click on the <code>thead</code> of one of these table it seems to me that the previous script is perfromed (it is right or am I saying wrong assertion?).</p>
  
  <p>I think so because this statment:</p>
  
  <pre><code> $("thead.opening").click(function () {....... 
  </code></pre>
  
  <p>means something like: perform the body of the defined function() when the user click on any <code>thead</code> element having <code>class=opening</code>.</p>
  
  <p>Is it my reasoning correct?</p>
  
  <p>No my doubt (and also the related problem) is: how jQuery know what is the specific <code>thead.opening</code> clicked by the user (the one related to the first table or the one related to the second table)?</p>
  
  <p>What exactly represent the <code>$(this)</code> element in the previous script? (it is the selected object or what?)</p>
  
  <p>And finally, how can I modify the previous script to obtain the reference of the inner <code>tbody</code> of the same table of the <code>thead.opening</code> clicked?</p>
  
  <p>Tnx</p>