Question

147

Show/hide tables with jQuery

rated 0 times [ 153] [ 6] / answers: 1 / hits: 77026 / 13 Years ago, wed, september 14, 2011, 12:00:00

I have a series of tables similar to the following html code:

<table id=film><tr>

       <th class=1>//HEAD CONTENT 1//</th>

       </tr>

       <tr>

       <td class=1>//BODY CONTENT 1//</td>

       </tr></table>

<table id=film><tr>

       <th class=2>//HEAD CONTENT 2//</th>

       </tr>

       <tr>

       <td class=2>//BODY CONTENT 2//</td>

       </tr></table>

I want the tables to expand individually when the respective head (<th>) is clicked. Moreover the tables should start unexpanded. I use the following jQuery script:

$(document).ready(function(){

    $('#film td').hide();

});



$(document).ready(function(){

var n1 = 0;

      $('#film th.1').click(function(){

         if(n1 == 0){

         $('#film td.1').show();

         n1 = 1;

         }else{

        $('#film td.1').hide();

         n1 = 0;}

       });

var n2 = 0;

      $('#film th.2').click(function(){

         if(n2 == 0){

         $('#film td.2').show();

         n2 = 1;

         }else{

        $('#film td.2').hide();

         n2 = 0;}

       });

});

However when I execute only the top table is able to show/hide not the second one.
Can anyone see where I'm going wrong?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

asalewisc

Add To Favorites

Follow

Total Points: 742

Total Questions: 98

Total Answers: 112

Location: Jordan

Member since Wed, Jun 17, 2020

4 Years ago

answered 13 Years ago jarettajb · Accepted Answer

You are using the same id on multiple elements. When you search by id, jQuery will only return one item (the first with that id). So your code is only acting on the first table. Use a class on the tables instead of an id.

<table class=film>......</table>



$('.film').each(function(f) {

    //this function will execute for each element with the class film

    //refer to the current element during this function using $(this)

});