Show hide javascript

JavaScript
1

Hello,
I found posted on a previous thread which is now closed this function which I added a bit to for my example…

<html>
<head>
<script>
function toggle() {
if( document.getElementById("hidethis").style.display=='none' ){
document.getElementById("hidethis").style.display = '';
}else{
document.getElementById("hidethis").style.display = 'none';
}
}
</script>
</head>
<body>

<span onClick="toggle();">toggle</span><br /><br />

<table border="1">
<tr>
<td>Always visible</td>
</tr>
<tr id="hidethis">
<td>Hide this1</td>
</tr>
<tr>
<td>Always visible</td>
</tr>
<tr id="hidethis">
<td>Hide this2</td>
</table>

What I want to know or try to do is have it so I can click the link or a button and make either one of them hide or show… So the function will work separately… If it was done now they both hide on the one click…

I need to be able to do it to quite a few (300+) so it would need to be something that can either be generated itself…

I don’t know JavaScript so I am trying to explain the best I can…

2

Hi,

What would help would be if you could post a bit of HTML, so that we can recreate your problem.

3

As you will see I have used <tbody>, this was the only way I could work out how to make it hide and show as a group in each Movie Type.

<script>
function toggle() {
if( document.getElementById("hidethis").style.display=='none' ){
document.getElementById("hidethis").style.display = '';
}else{
document.getElementById("hidethis").style.display = 'none';
}
}
</script>

<div id="table-container">
<table id="maintable" border="1" cellspacing="0" cellpadding="1">
<thead>
<th class="blk" nowrap>Number</th>
<th class="blk" nowrap>Original Title</th>
<th class="blk" nowrap>Translated Title</th>
<th class="blk" nowrap>Languages</th>
<th width="10%" class="blk" nowrap>Movie Length</th>
<th width="10%" class="blk" nowrap>Year</th>
<th width="10%" class="blk" nowrap>Resolution</th>
<th width="10%" class="blk" nowrap>Rating</th>
<th class="blk" nowrap>IMDB MOVIE URL</th>
<tr></tr></thead>

<td rowspan="2" class="lgt">1 <img src="appr10_7.gif" alt="7/10" /><br>  <img src="Movie-List.html_pics/Movie-List_1.jpg" alt="pic_movie_1" />  </td>
<td class="lgt"><font size="4">2 Guns </font></td>
<td class="lgt"><font size="4">Two Guns </font></td>
<td class="lgt"><font size="4">English, Spanish </font></td>
<td class="lgt"><font size="4">109 </font></td>
<td class="lgt"><font size="4"> 2013 </font></td>
<td class="lgt"><font size="4">2.35 : 1 </font></td>
<td class="lgt"><font size="4">6.8 </font></td>
<td class="lgt"><a href="http://imdb.com/title/tt1272878" target="_blank"><font size="4">2 Guns</font></a></td>
<tr><td height="12%" colspan="9" class="myButton" onClick="toggle();">CLICK ME FOR MORE INFORMATION OR CLICK ME FOR LESS</td></tr>
<tbody id="hidethis" style="display:none;">
<tr><td colspan="10"class="lgt"><br><font size="3">Actors </font><br>Denzel Washington, Mark Wahlberg, Paula Patton, Edward James Olmos, Bill Paxton<br><br></td>
</tr><tr><td colspan="10"class="lgt"><br><font size="3">Description </font><br>"2 Guns, 1 Bank."<br /><br />A DEA agent and a naval intelligence officer find themselves on the run<br><br></td>
</tr><tr><td colspan="10"class="lgt"><br><font size="3">Comments </font><br>Had a chance to view it this week with only the trailer as a guide as to what I was about to see.<br /><br></td></tbody>
<tr><td colspan="20" class="blk"></td>
</tr>

Now I need the below code have the same style function, and be able to ‘Show’ the hidden content.

<td rowspan="2" class="lgt">1 <img src="appr10_7.gif" alt="7/10" /><br>  <img src="Movie-List.html_pics/Movie-List_1.jpg" alt="pic_movie_1" />  </td>
<td class="lgt"><font size="4">Another Movie</font></td>
<td class="lgt"><font size="4">Another Movie</font></td>
<td class="lgt"><font size="4">English, Spanish </font></td>
<td class="lgt"><font size="4">109 </font></td>
<td class="lgt"><font size="4"> 2013 </font></td>
<td class="lgt"><font size="4">2.35 : 1 </font></td>
<td class="lgt"><font size="4">6.8 </font></td>
<td class="lgt"><a href="http://imdb.com/title/tt1272878" target="_blank"><font size="4">2 Guns</font></a></td>

<tr><td height="12%" colspan="9" class="myButton" onClick="toggle();">CLICK ME FOR MORE INFORMATION OR CLICK ME FOR LESS</td></tr> [COLOR="#FF0000"]<<<---- This would be where the Next Button would be, to be able to make the below 3 Table Class show.[/COLOR]
<tbody id="hidethis" style="display:none;">

<tr><td colspan="10"class="lgt"><br><font size="3">Actors </font><br>Denzel Washington, Mark Wahlberg, Paula Patton, Edward James Olmos, Bill Paxton<br><br></td>
</tr><tr><td colspan="10"class="lgt"><br><font size="3">Description </font><br>"2 Guns, 1 Bank."<br /><br />A DEA agent and a naval intelligence officer find themselves on the run<br><br></td>
</tr><tr><td colspan="10"class="lgt"><br><font size="3">Comments </font><br>Had a chance to view it this week with only the trailer as a guide as to what I was about to see.<br /><br></td>
<tr><td colspan="20" class="blk"></td>
</tr>

The table content continues, can be over 300 times, so I would need to be able to make it some how generate or know or something.
That is where I get confused and stuck…

<td rowspan="2" class="lgt">1 <img src="appr10_7.gif" alt="7/10" /><br>  <img src="Movie-List.html_pics/Movie-List_1.jpg" alt="pic_movie_1" />  </td>
<td class="lgt"><font size="4">Another Movie</font></td>
<td class="lgt"><font size="4">Another Movie</font></td>
<td class="lgt"><font size="4">English, Spanish </font></td>
<td class="lgt"><font size="4">109 </font></td>
<td class="lgt"><font size="4"> 2013 </font></td>
<td class="lgt"><font size="4">2.35 : 1 </font></td>
<td class="lgt"><font size="4">6.8 </font></td>
<td class="lgt"><a href="http://imdb.com/title/tt1272878" target="_blank"><font size="4">2 Guns</font></a></td>
<tr><td height="12%" colspan="9" class="myButton" onClick="toggle();">CLICK ME FOR MORE INFORMATION OR CLICK ME FOR LESS</td></tr>
<tbody id="hidethis" style="display:none;">
<tr><td colspan="10"class="lgt"><br><font size="3">Actors </font><br>Denzel Washington, Mark Wahlberg, Paula Patton, Edward James Olmos, Bill Paxton<br><br></td>
</tr><tr><td colspan="10"class="lgt"><br><font size="3">Description </font><br>"2 Guns, 1 Bank."<br /><br />A DEA agent and a naval intelligence officer find themselves on the run<br><br></td>
</tr><tr><td colspan="10"class="lgt"><br><font size="3">Comments </font><br>Had a chance to view it this week with only the trailer as a guide as to what I was about to see.<br /><br></td></tbody>
<tr><td colspan="20" class="blk"></td>
</tr>

With the way it is now, only the top Button will work and Show the <TR> selected… If I click on the other ones, if they were in the <tbody> they would also just open the top one.

4

I don’t mean to sound harsh, but the code you posted doesn’t help to recreate your issue.
Please read this and post something minimal that helps us reproduce the problem you are having.

Also, you cannot have multiple elements with the same id on the same page.