Html Show Hide Content - javascript

I am trying to find an OnClick Function that will work inside of a table.
When the page loads they content needs to be hidden, but given an option either but button or link to show it.
<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>
</thead>
<tbody>
<td class="lgt"><font size="4">2 Guns </font></td>
<tr><td class="lgt"><font size="4">Two Guns </font></td></tr>
<tr><td class="lgt"><font size="4">English, Spanish </font></td></tr>
<tr><td class="lgt"><font size="4">109 </font></td></tr>
This is roughly what I am trying to do, is be able to hide
<tr><td class="lgt"><font size="4">Two Guns </font></td></tr>
<tr><td class="lgt"><font size="4">English, Spanish </font></td></tr>
<tr><td class="lgt"><font size="4">109 </font></td></tr>
and or unhide them..
I have tried using the below input..
<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
<div id="wrap">
See more.</p>
<p>Hide this content.</p>
</div>
All that seems to do is lift the text in the cell of the table, and not the table..

UPDATE: Can't seem to get what exactly are you trying to do, so I'll try to cover the obvious.
I'm assuming you are coding the HTML yourself and not receiving the output of some server-side script, although that would be the most reasonable.
If you are coding the HTML, that means you can add classes, ids and tags as needed without problems. I would definitely do something entirely different but that would imply more convoluted code.
With multiple sections. A toggle per section:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script>
$(document).ready(function(){
$('.hidethis').hide();
$('.toggle').click(function(){
section = $(this).attr('data-section');
$(section + ' .hidethis').toggle();
});
});
</script>
</head>
<body>
<table id='section-1' border="1">
<caption>SECTION 1</caption>
<tr>
<td>Always visible</td>
</tr>
<tr class="hidethis">
<td>Hide this</td>
</tr>
<tr>
<td>Always visible</td>
</tr>
<tr class="hidethis">
<td>Hide this</td>
</tr>
</table>
<table id='section-2' border="1">
<caption>SECTION 2</caption>
<tr>
<td>Always visible</td>
</tr>
<tr class="hidethis">
<td>Hide this</td>
</tr>
<tr>
<td>Always visible</td>
</tr>
<tr class="hidethis">
<td>Hide this</td>
</tr>
</table>
<div class='toggle' data-section='#section-1'>Toggle section 1</div>
<div class='toggle' data-section='#section-2'>Toggle section 2</div>
</body>
</html>
One toggle per item:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script>
$(document).ready(function(){
$('.hidethis').hide();
$('.toggle').click(function(){
$('.hidethis', $(this).parent()).toggle();
});
});
</script>
</head>
<body>
<table id='section-1' border="1">
<tr>
<td>
<table>
<tr class='toggle'>
<td>
Always visible<br/>
<small>Toggle this</small>
</td>
</tr>
<tr class="hidethis">
<td>Hide this</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr class='toggle'>
<td>
Always visible<br/>
<small>Toggle this</small>
</td>
</tr>
<tr class="hidethis">
<td>Hide this</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
In this case, notice that in order to not over-complicate the jQuery code, you'll need some kind of container that parent both title and expandable content.

After much more searching about, I found this...
<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 this</td>
</tr>
<tr>
<td>Always visible</td>
</tr>
</table>
</body>
</html>
It worked a treat, the problem I found with it, was I couldn't work out how to make it do more than just 1 row.. But in the other posts someone mentioned using..
<tbody>
So I did over the ones I needed.. Now I have included a button and I am done with it :)
Thanks for your help though

Ok someone had helped me with this, and this was the solution to making it work a treat.
<script type='text/javascript'>
$(document).ready(function(){
$(document).on('keyup', '#search-box', function(){
$('#maintable tbody:not(.myContent)').each(function(){
var movieTitle = $(this).find('td:nth-child(2)').text();
if (RegExp($('#search-box').val(), 'i').test(movieTitle)) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
</script>
<tr><!-- FIX: Needed to wrap it in a row -->
<td class="lgt" style="height:120px;">Don't Hide</td>
<td class="lgt" style="height:120px;">Don't Hide</td>
<td class="lgt" style="height:120px;">Don't Hide</td>
</tr>
<tbody class="myContent" style="display:none;">
<tr>
<td colspan="10"class="lgt">Hide This</td>
</tr>
<tr>
<td colspan="10"class="lgt">Hide This/td>
</tr>
<tr>
<td colspan="10"class="lgt">Hide This</td>
</tr><!-- FIX: close row -->
</tbody>

Related

Hiding a <td> depending on the Condition

I have a table structure as given below:
<table>
<tr>
<td id="td1"> </td>
<td id="td2"> </td>
<td id="td3"> </td>
<td id="td4"> </td>
</tr>
</table>
I am checking some condition like:
if(a==2 || check == true)
I want to hide the "td3" if any one condition satisfies.
My code is in C#.
I have already tried
document.getelementbyId("td3").style("display"= "none"),
document.getelementbyId("td3").display.hide();
td3.Attributes.add("style", "display:none")
Your three JavaScript examples aren't valid JavaScript. I recommend reading the JavaScript docs a bit more in depth!
You can use the code below to hide the td.
document.getElementById("td3").style.display = "none";
<table>
<tr>
<td id="td1">TD1</td>
<td id="td2">TD2</td>
<td id="td3">TD3</td>
<td id="td4">TD4</td>
</tr>
</table>
You can simply use jQuery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#td3').hide()
});
</script>
</head>
<body>
<table>
<tr>
<td id="td1">TD1</td>
<td id="td2">TD2</td>
<td id="td3">TD3</td>
<td id="td4">TD4</td>
</tr>
</table>
</body>
</html>

Jquery - copy a row from one table to another

I'm brand new to jquery and javascript and I'm trying to write a simple app that will, when I press a button, copy a row from one table to another and then delete the row from the first table. I have a DeleteRow function that works just fine, but I can't get my "DraftPlayer" function to copy the row. I've tried quite a few of the solutions I've found on the web, but I can't get the syntax just right. You'll see only the second row in the table has the DraftPlayer button as I work this out.
Here are the code snippets I think are critical:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
//<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div> </div>
<p>Welcome to Mike's Draft App! </p>
<table id="players">
<table border="1">
<tr>
<td width="36"> Rank </td>
<td width="141"> Player Name </td>
<td width="52">Position </td>
<td width="38">Team </td>
<td width="69"> Bye Week </td>
<td width="52"><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
</tr>
<tr>
<td>1</td>
<td>Antonio Brown</td>
<td>WR</td>
<td>PIT</td>
<td>8</td>
<td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
<td width="103"> </td>
</tr>
<tr>
<td>2</td>
<td>Julio Jones</td>
<td>WR</td>
<td>ATL</td>
<td>11</td>
<td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
<td><input type="button" value="Draft" onClick="DraftPlayer(this)"></td>
</tr>
<table id="drafted">
<table border="1">
<tr>
<td width="36"> Rank </td>
<td width="141"> Player Name </td>
<td width="52">Position </td>
<td width="38">Team </td>
<td width="69"> Bye Week </td>
</tr>
</table>
<script>
function DeleteRow(o) {
var p=o.parentNode.parentNode;
p.parentNode.removeChild(p);
}
function DraftPlayer(o) {
var p=o.parentNode.parentNode;
copyTable = $('#drafted tbody');
cloneRow = p.clone();
copyTable.append(cloneRow);
p.parentNode.removeChild(p);
}
</script>
</body>
</html>
Thanks for any suggestions!
You are selecting $('#drafted tbody'); which is not present in DOM at all so you will get nothing. You need to add tbody to your table or you need to change the selector.
<table id="drafted">
<tbody>
<tr>
<th width="36"> Rank </th>
<th width="141"> Player Name </th>
<th width="52">Position </th>
<th width="38">Team </th>
<th width="69"> Bye Week </th>
</tr>
</tbody>
</table>
function DraftPlayer(o) {
var p = $(o).closest('tr');
copyTable = $('#drafted tbody');
cloneRow = p.clone();
copyTable.append(cloneRow)
p.remove();
}
function DeleteRow(o) {
var p=o.parentNode.parentNode;
p.parentNode.removeChild(p);
}
function DraftPlayer(o) {
var p=o.parentNode.parentNode;
copyTable = $('#drafted tbody');
cloneRow = p.innerHTML;
//alert(cloneRow )
copyTable.append("<tr>"+cloneRow+"</tr>");
p.parentNode.removeChild(p);
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
//<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div> </div>
<p>Welcome to Mike's Draft App! </p>
<table id="players">
<table border="1">
<tr>
<td width="36"> Rank </td>
<td width="141"> Player Name </td>
<td width="52">Position </td>
<td width="38">Team </td>
<td width="69"> Bye Week </td>
<td width="52"><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
</tr>
<tr>
<td>1</td>
<td>Antonio Brown</td>
<td>WR</td>
<td>PIT</td>
<td>8</td>
<td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
<td width="103"> </td>
</tr>
<tr>
<td>2</td>
<td>Julio Jones</td>
<td>WR</td>
<td>ATL</td>
<td>11</td>
<td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
<td><input type="button" value="Draft" onClick="DraftPlayer(this)"></td>
</tr>
<table id="drafted" border="1">
<tr>
<td width="36"> Rank </td>
<td width="141"> Player Name </td>
<td width="52">Position </td>
<td width="38">Team </td>
<td width="69"> Bye Week </td>
</tr>
</table>
</body>
</html>
A lot of mistakes in your code. Go through my code ,I edited it, Works Fine
You need to convert the DOM Element to jquery object in order to use the clone() function.
The modified DraftPlayer() function is:
function DraftPlayer(o) {
var p=o.parentNode.parentNode;
copyTable = $('#drafted tbody');
cloneRow = $(p).clone();
copyTable.append(cloneRow);
p.parentNode.removeChild(p);
}
Suggestions:
There are some problem with your HTML also
Modify the table tag.
<table id="your_id" border="1">
<tbody>
-----------
-----------
</tbody>
</table>

Click button and go back to first one after first click

<html>
<head>
<title>eLab</title>
<script type="text/javascript">
function change()
{
document.getElementById('myTable').style.height= "400";
document.getElementById('myTable').style.width= "1000";
return true;
}
</script>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1" style="height:1000;width:400;" id="myTable" align=center>
<tbody>
<tr>
<th>This is the head!</th>
<th>I'm the head too!</th>
</tr>
<tr>
<td align=center>Part 1</td>
<td align=center>Part 2</td>
</tr>
<tr>
<td align=center>Part 3</td>
<td align=center>Part 4</td>
</tr>
<tr>
<td colspan="2" align=center> Part 5</td>
</tr>
</tbody>
</table>
<center>
<input type="button" onclick="change()" value="Change It">
</center>
</body>
</html>
This is my html code.
After clicking the button, the table will change the height and width size.
I want to do this: after changing the size, if user clicks the button again, the table will change back to its original size or maybe it can change the size again as its original size.
Thank you!
If you accept css involved, you can use toggle to toggle certain class to achieve that.
And from, css length, 1000 is not a valid css value, you should use something like '1000px', otherwise the width/height would take no effect.
#myTable.changed {
width: 500px;
height: 300px;
}
<html>
<head>
<title>eLab</title>
<script type="text/javascript">
function change()
{
document.getElementById('myTable').classList.toggle('changed');
return true;
}
</script>
</head>
<body>
<!-- Note that the style you give here would not have an effect, as `height:1000` or `width:400` are not valid css length -->
<table border="1" cellpadding="1" cellspacing="1" style="height:1000;width:400;" id="myTable" align=center>
<tbody>
<tr>
<th>This is the head!</th>
<th>I'm the head too!</th>
</tr>
<tr>
<td align=center>Part 1</td>
<td align=center>Part 2</td>
</tr>
<tr>
<td align=center>Part 3</td>
<td align=center>Part 4</td>
</tr>
<tr>
<td colspan="2" align=center> Part 5</td>
</tr>
</tbody>
</table>
<center>
<input type="button" onclick="change()" value="Change It">
</center>
</body>
</html>
And if css is not in concern, then you can just use a flag to decide the behavior of that function, jsfiddle
<script type="text/javascript">
var changeFlag = false;
function change() {
var table = document.getElementById('myTable');
changeFlag = !changeFlag;
var width, height;
if (changeFlag) { // Click in odd, then change to new w/h
width = '500px';
height = '600px';
} else { // Click in even, change to origin size.
width = '400px';
height = '1000px';
}
table.style.width = width;
table.style.height = height;
return true;
}
</script>
<html>
<head>
<title>eLab</title>
<script type="text/javascript">
function change()
{
if(document.getElementById('myTable').style.height == "400px") {
document.getElementById('myTable').style.height= "1000";
document.getElementById('myTable').style.width= "400";
}
else {
document.getElementById('myTable').style.height= "400";
document.getElementById('myTable').style.width= "1000";
}
return true;
}
</script>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1" style="height:1000;width:400;" id="myTable" align=center>
<tbody>
<tr>
<th>This is the head!</th>
<th>I'm the head too!</th>
</tr>
<tr>
<td align=center>Part 1</td>
<td align=center>Part 2</td>
</tr>
<tr>
<td align=center>Part 3</td>
<td align=center>Part 4</td>
</tr>
<tr>
<td colspan="2" align=center> Part 5</td>
</tr>
</tbody>
</table>
<center>
<input type="button" onclick="change()" value="Change It">
</center>
</body>
</html>
I changed change function to work with your purpose.
Let you check this code
try this :
<html>
<head>
<title>eLab</title>
<script type="text/javascript">
var isToggled = false;
function toggleSize()
{
if(!isToggled)
{
document.getElementById('myTable').style.height= "400";
document.getElementById('myTable').style.width= "1000";
isToggled = true;
}
else
{
document.getElementById('myTable').style.height= "900";
document.getElementById('myTable').style.width= "400";
isToggled = false;
}
return true;
}
</script>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1" style="height:1000;width:400;" id="myTable" align=center>
<tbody>
<tr>
<th>This is the head!</th>
<th>I'm the head too!</th>
</tr>
<tr>
<td align=center>Part 1</td>
<td align=center>Part 2</td>
</tr>
<tr>
<td align=center>Part 3</td>
<td align=center>Part 4</td>
</tr>
<tr>
<td colspan="2" align=center> Part 5</td>
</tr>
</tbody>
</table>
<center>
<input type="button" onclick="toggleSize()" value="Change It">
</center>
</body>
</html>
Try this
.myTable1 {
height : 1000px;
width : 400px;
}
.myTable2 {
height : 400px;
width : 10000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
<title>eLab</title>
<script type="text/javascript">
function change(){
$('#myTable').toggleClass("myTable1");
$('#myTable').toggleClass("myTable2");
}
</script>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1" id="myTable" align="center" class="myTable1">
<tbody>
<tr>
<th>This is the head!</th>
<th>I'm the head too!</th>
</tr>
<tr>
<td align=center>Part 1</td>
<td align=center>Part 2</td>
</tr>
<tr>
<td align=center>Part 3</td>
<td align=center>Part 4</td>
</tr>
<tr>
<td colspan="2" align=center> Part 5</td>
</tr>
</tbody>
</table>
<center>
<input type="button" onclick="change()" value="Change It">
</center>
</body>
</html>

Toggling specific paragraphs using jquery doesn't work

I am trying to get jquery function to work on table rows. I am basing my solution on the following stack overflow question, however whenever I click on the expand link nothing seems to happen. I tried to debug the javascript code but it doesn't to reach it.
Here is the HTML code for reference:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style> td { white-space: pre } p { display: none } </style>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$("a[data-toggle]").on("click", function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element
$("p").hide();
$(selector).show();
});
</script>
</head>
<body>
<table class="table table-striped table-condensed table-hover" style="border-collapse: collapse">
<thead>
<tr>
<th class="confluenceTh"></th>
<th class="confluenceTh">a1</th>
<th class="confluenceTh">a2</th>
<th class="confluenceTh">a3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="confluenceTd"><a href ="#" data-toggle="#content0">Expand</button></td>
<td class="confluenceTd">b1</td>
<td class="confluenceTd">b2</td>
<td class="confluenceTd">b3</td>
</tr>
<tr>
<td colspan = "4" class="confluenceTd">
<p id="content1" class="expanding-content">val1</p>
</td>
</tr>
<tr>
<td class="confluenceTd"><a href ="#" data-toggle="#content1">Expand</button></td>
<td class="confluenceTd">c1</td>
<td class="confluenceTd">c2</td>
<td class="confluenceTd">c3</td>
</tr>
<tr>
<td colspan = "4" class="confluenceTd">
<p id="content1" class="expanding-content">val2</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Thanks!
You have two options:
wrap the code in $(document).ready
place it after your body tag close at the bottom of the file (benefits)
Your code also had mismatch of target element.
$("a[data-toggle]").on("click", function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element
$("p").hide();
$(selector).show();
});
.expanding-content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-striped table-condensed table-hover" style="border-collapse: collapse">
<thead>
<tr>
<th class="confluenceTh"></th>
<th class="confluenceTh">a1</th>
<th class="confluenceTh">a2</th>
<th class="confluenceTh">a3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="confluenceTd"><a href="#" data-toggle="#content1">Expand</button></td>
<td class="confluenceTd">b1</td>
<td class="confluenceTd">b2</td>
<td class="confluenceTd">b3</td>
</tr>
<tr>
<td colspan = "4" class="confluenceTd">
<p id="content1" class="expanding-content">val1</p>
</td>
</tr>
<tr>
<td class="confluenceTd"><a href ="#" data-toggle="#content2">Expand</button></td>
<td class="confluenceTd">c1</td>
<td class="confluenceTd">c2</td>
<td class="confluenceTd">c3</td>
</tr>
<tr>
<td colspan = "4" class="confluenceTd">
<p id="content2" class="expanding-content">val2</p>
</td>
</tr>
</tbody>
</table>
wrap the code in a document ready statement
$( document ).ready(function() {
// Handler for .ready() called.
});
The thing here is your jquery selector, you are targeting your links wrongly, try this instead:
<script>
$("a[data-toggle=*]").on("click", function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element
$("p").hide();
$(selector).show();
});
</script>
That way you will target all A tags, with a data-toggle with any value inside it.
An alternative way:
WORKING DEMO
<table class="table table-striped table-condensed table-hover" style="border-collapse: collapse">
<thead>
<tr>
<th class="confluenceTh"></th>
<th class="confluenceTh">a1</th>
<th class="confluenceTh">a2</th>
<th class="confluenceTh">a3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="confluenceTd"><a href ="#" data-toggle="#content0">Expand</button></td>
<td class="confluenceTd">b1</td>
<td class="confluenceTd">b2</td>
<td class="confluenceTd">b3</td>
</tr>
<tr>
<td colspan = "4" class="confluenceTd">
<p id="content0" class="expanding-content">val1</p>
</td>
</tr>
<tr>
<td class="confluenceTd"><a href ="#" data-toggle="#content1">Expand</button></td>
<td class="confluenceTd">c1</td>
<td class="confluenceTd">c2</td>
<td class="confluenceTd">c3</td>
</tr>
<tr>
<td colspan = "4" class="confluenceTd">
<p id="content1" class="expanding-content">val2</p>
</td>
</tr>
</tbody>
</table>
JS:
$(document).on("click","a[data-toggle]", function(e) {
e.preventDefault(); // prevent navigating
var selector = $(this).data("toggle"); // get corresponding element
$("p").hide();
$(selector).show();
});

slidetoggle multiple divs with same id

I am trying to create a table of information for artists. Fields are generated dynamically from database. If any user clicks on artist name, few others information related to the artist shows down. At first rest of the information are kept hide.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table>
<tr>
<td>Artist Name</td>
<td>Birth Year</td>
<td>Age</td>
</tr>
<tr id="collapsible">
<td><h2>A</h2></td>
<td>1988</td>
<td>26</td>
<div id="rest">
<tr>
<td>Blah</td>
<td>Blah</td>
<td>Blah</td>
</tr>
</div>
</tr>
<tr id="collapsible">
<td><h2>B<h2></td>
<td>1988</td>
<td>26</td>
<div id="rest">
<tr>
<td>Blah</td>
<td>Blah</td>
<td>Blah</td>
</tr>
</div>
</tr>
<tr id="collapsible">
<td><h2>C<h2></td>
<td>1988</td>
<td>26</td>
<div id="rest">
<tr>
<td>Blah</td>
<td>Blah</td>
<td>Blah</td>
</tr>
</div>
</tr>
</table>
</body>
</html>
Jquery
$(document).ready(function(){
// hide all div containers
$('collapsible#rest').hide();
// append click event to the a element
$('#check-details').click(function(e) {
// slide down the corresponding div if hidden, or slide up if shown
$(this).parent().next('#rest').slideToggle('slow');
// set the current item as active
$(this).parent().toggleClass('active');
e.preventDefault();
});
});
You had quite a few errors there. For example, you can't have random div's inside table rows unless they are inside elements. I corrected the syntax and made some improvements to your javascript code.($(this).parents('.collapsible').next('.rest').slideToggle('slow');) jsFiddle http://jsfiddle.net/q6AmR/
$(this).parent()
Is incorrect, your a tag is in a h2 which is it's parent, you'd have to do
$(this).parent().parent().parent()
To get back to the tr which contains the div.
Also, having a div within a tr is poorly formed HTML, as if having a tr within a tr.
I would recommend changing the HTML to something like:
<table>
<tr>
<td><a href="" class="artistLink">Katy Perry</td>
<td></td>
<td></td>
</tr>
<tr class="rest">
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
$("tr.rest").hide();
$("a.artistLink").click(function(e) {
$(this).parent().parent().next("tr.rest").slideToggle();
...
});
</script>
This was written on my iPad so might need tweaking!

Categories