Show / hide tables using jQuery

Question

I have a number 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 corresponding head ( <th> ) is pressed. In addition, tables should start unchanged. I am using 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, you can show / hide not the second. Can anyone see where I'm wrong?

Answer 1

You are using the same identifier for multiple items. When you search by id, jQuery returns only one element (the first with this id). Thus, your code acts only on the first table. Use a class in tables instead of an identifier.

 <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

It is much easier to do this - use a class instead of id for table values. Thus, they are easier to call a group easier

 <table class="film"> ... 

After which the next jquery should give you the behavior you are looking for

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

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

Answer 3

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

Your html is broken. Change this:

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

For this:

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

In addition, you used id for film , when in fact you have 2 instances. Instead, you put a class:

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

Answer 4

Two problems:
Firstly, your HTML is broken
Change

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

For

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

Secondly, the HTML identifier must be unique, so I suggest using classes.

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

I used .toggle () to simplify jQuery a bit

Hope this helps, and Happy Coding.

Answer 5

show / hide table with jquery

The code is here! I am using slideToggle + data attr

Answer 6

With this jQuery you can show and hide

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

HTML

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