• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 387
  • Last Modified:

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.
0
kyleroi
Asked:
kyleroi
  • 2
1 Solution
 
JF0Commented:
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now