asked on

Accordian Table

Can someon provide a code example that will alow me to have a bunch of rows. When the row is clicked more rows with detail will how up underneath?

i.e.

row
detail row
row
row
row

detail row(s) will show up under row when row is clicked.

ASKER CERTIFIED SOLUTION

JF0

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

kyleroi

ASKER

this is adding columns to the right. How do I add/show (sorry new at the terminology) rows below. The idea being that you click an entire row (parent) with multiple columns and a new row is created(shown) beneath.

kyleroi

ASKER

ok, using your code I came up with this, a bit dirty but I have the general Idea now

<html>
<head>
<title></title>
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.child').hide();

		$('.parent').click(function(){
			$('.child').hide();
			$(this).nextUntil('.parent').fadeIn('normal');

		});

	});
</script>
</head>
<body>

<p/>

<table border='1'>
	<tr class="parent">
		<td>
			Parent
		</td>
	</tr>
	<tr class="child">
		<td>
			Child
		</td>
	<tr>
	<tr class="child">
			<td>
				Child
			</td>
	<tr>
	<tr class="parent">
			<td>
				Parent
			</td>
	</tr>
		<tr class="child">
			<td>
				Child
			</td>
		<tr>
		<tr class="child">
				<td>
					Child
				</td>
	<tr>
</table>
</body>
</html>

Open in new window