Show/hide tables with jQuery

Answer 1

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)"
});

Answer 2

show/hide table with jquery

Code here ! i'm useslideToggle + data attr

Answer 3

Using this jQuery you can show & hide

$("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });

html

<button id="hide">Hide</button>
<button id="show">Show</button>

Answer 4

A much easier way to do this is to use a class instead of an id for the table values. This way they can be referred to as a group more easily

<table class="film"> ... 

After which the following jquery should give you the behavior you're looking for

$(document).ready(function() {
    $('.film td').hide();
    $('th').click(function() {
       $(this).parents('table').find('td').toggle();
    }); 
});

Fiddle: http://jsfiddle.net/WZUAZ/1/

Answer 5

Two problems:
First, Your HTML is broken
Change

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

To

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

Second, HTML id's should be unique so I suggest using classes instead.

Here is a working example: http://jsfiddle.net/jkohnen/tBkh4/

I used .toggle() to simplify the jQuery a bit

Hope that helps, and Happy Coding.

Answer 6

Here is a working version: http://jsfiddle.net/6Ccj7/

Your html is broken. Change this:

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

To this:

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

Also, you used id for film when in fact you have 2 instances. You class instead:

<table class="film"><tr>
       <th class="1">//HEAD CONTENT 1//</th>
       </tr>
       <tr>
       <td class="1">//BODY CONTENT 1//</td>
       </tr></table>
<table class="film"><tr>
       <th class="2">//HEAD CONTENT 2//</th>
       </tr>
       <tr>
       <td class="2">//BODY CONTENT 2//</td>
       </tr></table>

Here is the updated JS:

$(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;}
       });
});