title: Jquery doing nothing to a certain class
body: <p>This problem will probably be very simple for anyone that works with JQ. I've just started with the code, so it's not much to look at, really.</p>
  
  <pre><code>&lt;table border="1px"&gt;     //database connection and &lt;head&gt; with scripts 
      &lt;tr&gt;                    //(including jquery link) come before this
          &lt;th&gt;Data/Timp&lt;/th&gt;
          //random headers
      &lt;/tr&gt;
      &lt;?php
      $sql = "SELECT * FROM table1 ORDER BY Timp DESC";
      $result = $conn -&gt; query($sql);
      while ($row = $result -&gt; fetch_assoc()) {
          echo "
          &lt;tr class = 'mainRow'&gt;
              &lt;td&gt;".$row['Timp']."&lt;/td&gt;
              &lt;td&gt;".$row['Tema']."&lt;/td&gt;
              //a few more of these
          &lt;/tr&gt;";
          $sql = "SELECT * FROM table2 WHERE ID_tema = " . $row['ID'];
          echo "&lt;div class = 'dropdown'&gt;";
          $result2 = $conn -&gt; query($sql);
          //more table headers here
          while ($row2 = $result2 -&gt; fetch_assoc()) {
              echo "
              &lt;tr&gt;
                  &lt;td&gt;".$row2['Timp']."&lt;/td&gt;
                  &lt;td&gt;".$row2['Descriere']."&lt;/td&gt;
                  //more of these
              &lt;/tr&gt;";
          }
          echo "&lt;/div&gt;";
      }
      ?&gt;
  &lt;/table&gt;
  </code></pre>
  
  <hr>
  
  <p>What I'm trying to do is something of a questlog, I suppose. You have various <em>quests</em> (which you get from a table) and each <em>quest</em> has <em>tasks</em> which you get from another table. Now the script above works just fine, (even if it's more hideous than Quasimodo), but it does nothing when I try to use Jquery to improve it. What I want to do is click on a <em>quest</em> and have the tasks for it slide down or slide back up if they were already expanded. Thing is, my workflow is "Baby steps and check everything works at every point" so the first Jquery I built for it was:</p>
  
  <pre><code>$(document).ready(function() {
      $('.dropdown').hide();
  });
  </code></pre>
  
  <p>And, for the life of me, I can't figure why it won't work. Switching to <code>$('.mainRow').hide();</code> works just fine, but I don't know how to make that dropdown menu disappear. Would greatly appreciate any help.</p>