Very useful, especially I like small footprint, HTML code is clean and jQuery is very lightweight...

Thx, Janko and keep up with the good work!

Simple, yet effective - great work once again Janko! Really like to see the UI Exp. increase when people use these kinds of effects.

Thanks for sharing this beautiful and simple piece of code!

Great Janko! Simple, useful and lightweight jQuery code

Thx for sharing your great knowledge!

Very nice!

Genius, reusable code at it's best

Very clean and quite simple. Will definitely add this to my arsenal.

Doesn't seem to work in IE8...if you care. But it does work in compatiblity mode.

I bet this would conflict with a plugin like tablesorter. I've been thinking about trying to do a hybrid of that and something like this using <div>'s but it's just a thought!

This works great, but is there a way to dynamically populate the table? I've tried using php/mysql, but every time I add the Table ID the page loads blank.

Thanks

Simple, yet effective - great work once again Janko!

IE8 behaves so bad that I sometimes think, that group of amateurs built it :-(
However your example is once again very interesting UI solution. Keep up the good work

Cool, i've modified it to use ajax to load the content.

Muy buen blog de diseño! great blog! thanks from Argentina.

well it wasn't as hard as I'd expect it to be. Pretty straightforward tutorial, thanks a lot.

Could someone please post code that works with IE 8 and other browsers, i can make IE8 show the detail row when clicked but i can't or dont know how to work out the code to hide it again.

Thanks

Clear, straightforward and useful! Exactly what I need in my project 8) Thanks!

Nice bit of code. I'm no js expert but i've been trying to add a class to the expanded row, and remove it when it's clicked again. So far I have the class being added on the click, but i'm not sure how to remove it again.

(function($){
$.fn.jExpand = function(){
var element = this;

$(element).find("tr:odd").addClass("odd");
$(element).find("tr:not(.odd)").hide();
$(element).find("tr:first-child").show();


$(element).find("tr.odd").click(function() {
$(this).next("tr").toggle();
$(this).addClass("highlight");

});

}
})(jQuery);

I'd also second Jono's request for IE8 compatible code.

Thanks a million, any tips appreciated!

Thanks for the code! Exactly what I needed! I tried the JQuery UI accordian, but it was just "too much" for what I needed.

A quick question from a JQuery novice. How can I open a particular row based on a query string variable? I have a landing page with several options in collapsible rows. When a user clicks a link from another page to this landing page I would like the appropriate row to open up.

Hi great bit of code this thanks, but could you explain to the layman copy and paste coder how to make it IE8 compliant, is it as simple as this? And would it still work in IE7, 6 etc.

<script type="text/javascript">
$(document).ready(function(){
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();

$("#report tr.odd").click(function(){
$(this).next("tr").show();
$(this).find(".arrow").toggleClass("up");
});
//$("#report").jExpand();
});
</script>

Hi,

Can you please paste the code for ie8, I have excatly the same problem as someone aboe, that in IE8 show() works, but hide() doesnt.

Thanks!

Not sure about toggle() function not working in ie8

I've found other examples which use toggle and work fine in ie8. (andylangton.co.uk/.../)

I wish I could tell you what was wrong with yours but I don't know jQuery.

If you can find a fix or post the show/hide method that would be great.

Regards

This works for me

$(document).ready(function(){
$("#transactioncategories tr:odd").addClass("odd");
$("#transactioncategories tr:not(.odd)").hide();
$("#transactioncategories tr:first-child").show();

$("#transactioncategories tr.odd").click(function(){
if($(this).next("tr").is(":visible"))
{
$(this).next("tr").hide();
}
else $(this).next("tr").show();
$(this).find(".arrow").toggleClass("up");
});

mmm, doesn't work at all now.

Can you post a link to the page where it's working?

The hidden info just shows permanently now.

I think this is what you were trying to achieve but it still fails in ie8. I wish I knew jQuery!


$(document).ready(function(){
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();

$("#report tr.odd").click(function(){
if($(this).next("tr").is(":visible"))
{
$(this).next("tr").hide();
}
else $(this).next("tr").show();
$(this).find(".arrow").toggleClass("up");
});
//$("#report").jExpand();
});

UPDATE:

I think the original code using toggle is good but ie8 is having a problem with the latest version of jQuery 1.3.2. I tried this using a slightly older version of jQuery library 1.2.3 and it works fine!

One more question though: How can I restrict the onclick to just the arrow? At the moment you can click anywhere in the row and the hidden row appears. That's fine until you want to put links into other cells on that row and then the link works but the onclick activates as well (which you don't want!)

Any ideas?

Thank you for the great code
me too, it didn't move with IE8. so I also changed the version from 1.3.2 to 1.2.3 and then moved with IE8.

I hope I can understand...

Thanks a lot!!

JQuery 1.2.6 works on IE8 for this script as well... not checked against anything else. IE 8, guaranteed to spoil your day... no change there, then!

not working in ie8

I have developed a similar widget and IE 8 was killing me.
I have found out that IE works if I change the document declaration to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

or change toggle () with show and hide as was suggested above.

Great piece of code! Thank you for sharing.

Is there anyway I can add a button that closes all the expanded rows?

Hi again Janko. Thanks for the tip. Unfortunately I couldn´t get it to work. Where should I place that line of code?

Hi Janko
Your code is so enjoyable and usefull, it was a question in my mind how can do it,but I don't know how can I use it in my solution,may I ask you send me an email ? (complete code ( souce code ) as one simple asp solution ) or a link for download complete source code ?. I will be thankful .
Best regards

Hi Janko and Hello to everyone, I have another question and I will be so thankful if somebody can help me. How can I set the table row ( move ) as the first row when cilck on it ( using jquery )?
best regards.

Hi Janko,thank you about your reply,may I ask you lead me how can I set a table row as first table row ( show it at the first index) using jquery ? , I will be so thankful
best regards.

Hello,
good code but someone would be able to make it works with tablesorter jquery plugin ?
Thank you!

Thanks, Janko !!!
I've found the solution for jquery 1.3.2 foe IE 8
You just need to edit the jquery script:
replace this

Sizzle.selectors.filters.hidden = function(elem){
return elem.offsetWidth === 0 || elem.offsetHeight === 0;
};

Sizzle.selectors.filters.visible = function(elem){
return elem.offsetWidth > 0 || elem.offsetHeight > 0;
};

by this

Sizzle.selectors.filters.hidden = function(elem){
var width = elem.offsetWidth, height = elem.offsetHeight,
force = /^tr$/i.test( elem.tagName );
return ( width === 0 && height === 0 && !force ) ?
true :
( width !== 0 && height !== 0 && !force ) ?
false :
!!( jQuery.curCSS(elem, "display") === "none" );
};

Sizzle.selectors.filters.visible = function(elem){
return !Sizzle.selectors.filters.hidden(elem);
};

Thanks, Janko!!!)))
I've found the solution for jquery 1.3.2 for IE 8
You just need to edit jquery source:

replace this

Sizzle.selectors.filters.hidden = function(elem){
return elem.offsetWidth === 0 || elem.offsetHeight === 0;
};

Sizzle.selectors.filters.visible = function(elem){
return elem.offsetWidth > 0 || elem.offsetHeight > 0;
};

by this

Sizzle.selectors.filters.hidden = function(elem){
var width = elem.offsetWidth, height = elem.offsetHeight,
force = /^tr$/i.test( elem.tagName );
return ( width === 0 && height === 0 && !force ) ?
true :
( width !== 0 && height !== 0 && !force ) ?
false :
!!( jQuery.curCSS(elem, "display") === "none" );
};

Sizzle.selectors.filters.visible = function(elem){
return !Sizzle.selectors.filters.hidden(elem);
};

great stuff, it works fine in Ie7 , IE8 and firefox

Chandler's fix may have other unwanted effects on.... I use this instead :

(function($){
$.fn.jExpand = function(){
var element = this;

$(element).find("tr:odd").addClass("odd");
$(element).find("tr:not(.odd)").hide();
$(element).find("tr:first-child").show();

$(element).find("tr.odd").click(function() {
var tr = $(this).next("tr");

if(tr.css("display") == "none")
tr.css("display", "table-row");
else
tr.css("display", "none");

$(this).find(".arrow").toggleClass("up");
});

}
})(jQuery);

Great... this is what i was searching.. Can i add the class or id for the <tr> and display/hide them.
in my case i may not want odd rows to be hide/show. i may want depending on conditions.

I got this code to work is ie8 and Firefox, Chrome
Checks the class of the Arrow, rather than if tr is visible.

$("#report tr.odd").click(function(){
if($(this).find(".arrow").hasClass("up"))
{
$(this).next("tr").hide();
}
else $(this).next("tr").show();
$(this).find(".arrow").toggleClass("up");
});

Did anyone figure out how to combine tablesorter with this cool plugin? Is that logically impossible due to the way the two plugins were coded?

Cool code!

When I use a nested table in my “details row” its rows toggle too. How do I prevent this in my nested table?

Hi,

Thanks! It gave me an idea for my datagrid

Great, pls. check with IE8. Thanks in advance!

Norbert

(function($){
$.fn.jExpand = function(){
var element = this;

$(element).find("tr:odd").addClass("odd");
$(element).find("tr:not(.odd)").hide();
$(element).find("tr:first-child").show();

$(element).find("tr.odd").click(function() {
var tr = $(this).next("tr");

if(tr.css("display") == "none")
tr.css("display", "table-row");
else
tr.css("display", "none");

$(this).find(".arrow").toggleClass("up");
});

}
})(jQuery);



CodeReaper's alternate code for IE8 worked great for me, but it didn't work in IE 6 or IE 7. I found out that it's because IE 6 and IE 7 don't recognize the "table-row" value as a valid css attribute for "display".

To fix, I changed the line:

tr.css("display", "table-row");

to:

tr.css("display", "t");

and it worked great in IE 6, IE 7, and IE 8 (in addition to FF 3, Chrome 4, etc)

The code change should read

"tr.css("display", "");"

instead of

"tr.css("display", "t");"

Typo on my part.

@Geert
I wish to know that too, i tried with #id > tr:odd and ("#id").children("tr:odd") . ..i couln't make it to work . Could someone with a better knowledge of JQ help us please!

..and to make it work with tablesorter too would definitely be a plus

p.s: thx for the articles as always very useful! ^^

no work in ie8

Hi Janko,
Great work as always
I added slideToggle for the toggle but not pretty smooth enough. Here's the code :

$("#report tr.odd").click(function(){

$(this).next("tr").slideToggle('slow', function() {

if($(this).css('display') == 'block')
$(this).css('display', 'table-row');
});

$(this).find(".arrow").toggleClass("up");
});

Its`s a cool plugin. Thank you.

Together with tableSorter woulkt be nice!

is it possible to open the next tr by clicking only the arrow div?

I added checkboxes to the tr`s. but if i click the checkbox the next tr opens.

Thank you

It seems that i cant get it to work with ajax-loaded table. It works with static table, but when i try to assign it to a table, which has tr's loaded by ajax call, it will not work. It just shows those additional info rows. No interaction whatsoever. What am i doing wrong?

My rows are being loaded like this:

success: function(data) {
$('#loading').hide();
$('#tblx> tbody:last').append(data);

}

And after that i call this expand-func.

$("#tblxtr:odd").addClass("master");
$("#tblxtr:not(.master)").h.... etc.

Shalom everybody!
After I spent 2 week on improving this code, I want to share with you how to make slideToggle.
DEMO is here: http://ayalon.ru/cms/primer/
This string should be added before HEAD tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"www.w3.org/.../xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

In HEAD shoul be these strings:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}
#report { border-collapse:collapse;}
#report h4 { margin:0px; padding:0px;}
#report img { float:right;}
#report ul { margin:10px 0 10px 40px; padding:0px;}
#report th { background:#7CB8E2 url(header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:left;}
#report td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:0px 1px; }
#report tr.odd td { background:#fff url(row_bkg.png) repeat-x scroll center left; cursor:pointer; }
#report div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
#report div.up { background-position:0px 0px;}
#report .message_body { display: none;}
#r { display: none;}
</style>

Javascript I added after BODY tag:

<div id="txtHint"><b>Person info will be listed here.</b>

<script type="text/javascript">
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();

$(document).ready(function(){
$(".message_head").live("click",function(){
$("." + this.id).slideToggle("slow");

$(this).toggleClass("active");

$(this).find(".arrow").toggleClass("up");

});
//$("#report").jExpand();
});
</script>

And the main code:
$con = mysql_connect('localhost', 'user', pass');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("dbname", $con);
$sql="SELECT * FROM azaa ORDER BY id DESC limit 30";
$result = mysql_query($sql);

echo "<table id='report'>";
echo "<tr>
<th>Country</th>
<th>Population</th>
<th>Area</th>
<th>Official languages</th>
<th>Another</th>
<th></th>
</tr>";
while($row=mysql_fetch_array($result))
{
echo "<tr class='message_head' id='". $row['id'] ."'>";
echo "<td style='background:#fff url(row_bkg.png) repeat-x scroll center left; cursor:pointer;'>". $row['id'] ."</td>";
echo "<td style='background:#fff url(row_bkg.png) repeat-x scroll center left; cursor:pointer;'>". $row['name7'] ."</td>";
echo "<td style='background:#fff url(row_bkg.png) repeat-x scroll center left; cursor:pointer;'>". $row['name3'] ."</td>";
echo "<td style='background:#fff url(row_bkg.png) repeat-x scroll center left; cursor:pointer;'>". $row['name17'] ."</td>";
echo "<td style='background:#fff url(row_bkg.png) repeat-x scroll center left; cursor:pointer;'>". $row['name1'] ."</td>";
echo "<td style='background:#fff url(row_bkg.png) repeat-x scroll center left; cursor:pointer;'><div class='arrow'></div></td>";
echo "</tr>";

echo "<tr>
<td colspan='6'><div class='". $row['id'] ."' id='r'>";
echo "<div>". $row['id'] ."";
echo "". $row['teudatzeut'] . "";
echo "". $row['miparishui'] . "";
echo "". $row['name18'] . "";
echo "". $row['teudatzeut'] . "";
echo "". $row['miparishui'] . "";
echo "</div>";
echo "</div></td>
</tr>";

}
echo "</table>";

mysql_close($con);
unset($_SESSION['q']);
unset($_SESSION['a']);

?>

as you can see on my DEMO I added some AJAX code to do it sortable. On any question I'll give an explaination.

Updated to jquery-1.4.min.jsWorks perfect in IE6 / 7 / 8 , FireFox, Google Chrome and Opera.

Heres an example a small change I made to get it working in IE8 using show(), hide()

$(document).ready(function(){
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();

$("#report tr.odd").click(function(){
if(!$(this).next("tr").hasClass('shown'))
{
$(this).next("tr").show()
$(this).find(".arrow").toggleClass("up");
$(this).next("tr").addClass("shown");
}
else
{
$(this).next("tr").hide()
$(this).find(".arrow").toggleClass("up");
$(this).next("tr").removeClass("shown");
}
});
//$("#report").jExpand();
});

Hope that helps!

Starting to really enjoy jQuery, saves so much time!