Question

I was working today and decided to start using JQUERY to make a toggle table for a search site… but I literally started javascript and jquery like a couple days ago. Without the table, it works fine, but when I add the table it doesn’t toggle the table…I want when you click on Filter Search for the table to come underneath and then when you click on filter search again to hide the table… Any help is much appreciated. Heres the code ( i already have jquery referenced in the head)

<div class='filtermore'>
  <h4><a>Filter Search</a></h4>
  <p style="display: none" class='jquery'>

  <table border=0 width="875">
       <tbody>
          <tr>
             <td width="164"><strong>City</strong></td>
             <td width="176"><strong>Price</strong></td>
             <td width="160"><strong>Features</strong></td>
          </tr>
           <tr>
             <td><input type="checkbox"/> City 1</td>
             <td><input type="checkbox"/> Cheap</td>
             <td><input type="checkbox"/> Financing Available</td>
             <td width="357"><input type="checkbox"/> Good for kids</td>
          </tr>
           <tr>
             <td><input type="checkbox"/> City 2</td>
             <td><input type="checkbox"/> Moderate</td>
             <td><input type="checkbox"/> Smoking</td>
             <td><input type="checkbox"/> Accepts Credit Cards</td>
          </tr>
           <tr>
             <td><input type="checkbox"/> City 3</td>
             <td><input type="checkbox"/> Expensive</td>
             <td><input type="checkbox"/> Alcohol</td>
             <td><input type="checkbox"/> Delivery</td>
           </tr>
        </tbody>
     </table>
  </p>
<script>
$("h4").click(function () {
$(".jquery").toggle("slow");
});
</script>


</div>

Answer 1

Technically you are telling the <p> tag to toggle, not the table. While you would assume the table would inherit from the <p>, tables are busted and old-school and render differently in each browser, so you can’t count on them to pay attention. I would add an ID to the table and call toggle on it, or use a child selector in jQuery (which you won’t have learned the first week, for sure) to target the table directly. Something like this:

<table id="mytable">

$('#mytable').toggle('slow');

// or child selector method
$('.jquery table').toggle('slow'); 

// or another method, more advanced, but the same idea would be
$('.jquery :first-child').toggle('slow');