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.
LVL 1
kyleroiAsked:
Who is Participating?
 
JF0Connect With a Mentor Commented:
This should give you an idea.

<html>
<head>
<title></title>
<style>
.togBut {height:15px;width:15px;border: solid 1px #FFFFFF;}
.divAdd {border:solid 1px red;background-color:#e6e6fa;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
<script>
	$(document).ready(function() {
		$('.divAdd').hide();
	
		$('.togBut').click(function(){
		
			$('.divAdd', $(this).parent().next()).slideToggle('normal');
		
		});
			
		$('.togBut').toggle(
			function(){
				$(this).children(":first").attr("src","minus.jpg");
				},
			function(){
				$(this).children(":first").attr("src","plus.jpg");
				}
		);
		
	});
</script>
</head>
<body>

<p/>

<table border='1'>
	<tr>
		<td>
			<div class='togBut'><img id='imgTog' src='plus.jpg' border='1' width='15' height='15' /></div>
		</td>
		<td>
			<div class="divAdd">xxxxxxxxxxx zzzzzzzzzzzzzzzzzzzzz<p/>aaaaa<p/></div>
		</td>
	</tr>					
	<tr>
		<td>
			<div class='togBut'><img id='imgTog' src='plus.jpg' border='1' width='15' height='15' /></div>
		</td>
		<td>
			<div class="divAdd">xxxxxxxxxxx zzzzzzzzzzzzzzzzzzzzz<p/>aaaaa<p/></div>
		</td>
	</tr>					
	<tr>
		<td>
			<div class='togBut'><img id='imgTog' src='plus.jpg' border='1' width='15' height='15' /></div>
		</td>
		<td>
			<div class="divAdd">xxxxxxxxxxx zzzzzzzzzzzzzzzzzzzzz<p/>aaaaa<p/></div>
		</td>
	</tr>					
</table>
</body>
</html>

Open in new window

0
 
kyleroiAuthor Commented:
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.
0
 
kyleroiAuthor Commented:
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

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.