Solved

Table Accordian

Posted on 2011-03-17
2
281 Views
Last Modified: 2012-05-11
The code below does what I want to expand child rows under parent rows.  I would like to add to it the ability to click an expanded parent row to collapse children underneath it.  Right now if I click on something already expanded it just does the same thing all the time.  Hope that was clear, if not please ask.

<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
Comment
Question by:kyleroi
2 Comments
 
LVL 8

Accepted Solution

by:
McNetic earned 500 total points
ID: 35164321
Change your click method to the following:
                $('.parent').click(function(){
                        var next = $(this).nextUntil('.parent', '.child');
                        if (next.is(':visible')) {
                          next.hide();
                        } else {
                          $('.child').hide();
                          next.fadeIn('normal');
                        }
                });

Open in new window

This will check if the items are visible, if yes hide them, if no hide all others and show the new ones.
0
 
LVL 1

Author Closing Comment

by:kyleroi
ID: 35177956
Works great thanks!
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question