I am implementing the jExpand plugin example from the Janko at Warp Speed blog. I can do the example code just fine, but I want to improve it by using slideToggle() instead of Toggle() so I can slowly expand and contract the extra table row. Here is a jsFiddle of what I have so far. Why is it not working and how do I fix it?
Making use of the following function provides one way to toggle a table row.
function slideToggleRow(selector){
if ($(selector).is(':hidden')) {
$(selector).slideToggle('slow');
$(selector).find("td").contents().slideToggle('slow');
} else {
$(selector).find("td").contents().slideToggle('slow');
$(selector).slideToggle('slow');
}
}
If instead you’re wanting an effect where the bottom of the row expands up or down to reveal the contents of the table row, we’re going to want someone who knows more about CSS techniques to achieve that.
I’ll see if anyone in the CSS forum would like to throw some knowledge this way.
Do either one of these demos fit your needs?
http://www.codefundamentals.com/demos/css3-up-down-accordion
http://www.codefundamentals.com/demos/css3-up-down-accordion-noJS
One of those works with no Javascript needed.
After doing some Googling, I’ve found the main reason it is not working is because tables and table-rows don’t work well with the slideToggle() function. I have reworked the project as a collection of divs instead of a table. Here is an updated jsFiddle of my page:
http://jsfiddle.net/MrSnrub/0L0kaxzc/16/
The slideToggle() function now works, but the formatting of the divs is messed-up. It appears the detail row cannot extend the entire width of the table row, even if I set width to 100%. Can anyone help me?
It’s behaving like that because it’s a table-cell within a table, and as far as I know, there’s no good CSS-based colspan solution.
I’d go back to a standard table if I were you and look for some other solution to the problem, such as by placing the content of the table data within divs and using slideToggle on those divs, which works a lot better.
OK then so I can’t use display:table-row and table-cell. Is there any other way to display this information? How did old browsers do this (before table-row and table-cell were introduced)? Can I explicitly set the width of each cell?
Either choose to go back to using a table, or use non-table techniques to display the information.
Attempting to straddle the gap is not a viable position for you.
If you would like some CSS help with this, then we have a good group of people here in the HTML+CSS that can advise on how to best achieve your desired presentation results.
Once the CSS for properly doing this is known, we can then finally go back to scripting to finish things off.
1 Like
Why don’t you hide the contents as Paul suggested earlier?
e.g.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
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("http://www.jankoatwarpspeed.com/wp-content/uploads/examples/expandable-rows/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("http://www.jankoatwarpspeed.com/wp-content/uploads/examples/expandable-rows/row_bkg.png") repeat-x scroll center left; cursor:pointer; }
#report div.arrow { background:transparent url("http://www.jankoatwarpspeed.com/wp-content/uploads/examples/expandable-rows/arrows.png") no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
#report div.up { background-position:0px 0px;}
</style>
</head>
<body>
<table id="report">
<tr>
<th></th>
<th>Country</th>
<th>Population</th>
<th>Area</th>
<th>Official languages</th>
</tr>
<tr>
<td><div class="arrow"></div></td>
<td>United States of America</td>
<td>306,939,000</td>
<td>9,826,630 km2</td>
<td>English</td>
</tr>
<tr>
<td colspan="5">
<div class="slide">
<p>Flag of USA</p>
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Usa">USA on Wikipedia</a></li>
<li><a href="http://nationalatlas.gov/">National Atlas of the United States</a></li>
<li><a href="http://www.nationalcenter.org/HistoricalDocuments.html">Historical Documents</a></li>
</ul>
</div>
</td>
</tr>
<tr class="message_head" id="2">
<td><div class="arrow"></div></td>
<td>United Kingdom </td>
<td>61,612,300</td>
<td>244,820 km2</td>
<td>English</td>
</tr>
<tr>
<td colspan="5">
<div class="slide">
<p>Flag of UK</p>
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/United_kingdom">UK on Wikipedia</a></li>
<li><a href="http://www.visitbritain.com/">Official tourist guide to Britain</a></li>
<li><a href="http://www.statistics.gov.uk/StatBase/Product.asp?vlnk=5703">Official Yearbook of the United Kingdom</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td><div class="arrow"></div></td>
<td>India</td>
<td>1,147,995,904</td>
<td>3,287,240 km2</td>
<td>Hindi, English</td>
</tr>
<tr>
<td colspan="5">
<div class="slide">
<p>Flag of India</p>
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/India">India on Wikipedia</a></li>
<li><a href="http://india.gov.in/">Government of India</a></li>
<li><a href="http://wikitravel.org/en/India">India travel guide</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td><div class="arrow"></div></td>
<td>Canada</td>
<td>33,718,000</td>
<td>9,984,670 km2</td>
<td>English, French</td>
</tr>
<tr>
<td colspan="5">
<div class="slide">
<p>Flag of Canada</p>
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Canada">Canada on Wikipedia</a></li>
<li><a href="http://atlas.gc.ca/site/index.html" >Official Government of Canada online Atlas of Canada</a></li>
<li><a href="http://wikitravel.org/en/Canada">Canada travel guide</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td><div class="arrow"></div></td>
<td>Germany</td>
<td>82,060,000</td>
<td>357,021 km2</td>
<td>German</td>
</tr>
<tr>
<td colspan="5">
<div class="slide">
<p>Flag of Germany</p>
<h4>Additional information</h4>
<ul>
<li><a href="http://en.wikipedia.org/wiki/Germany">Germany on Wikipedia</a></li>
<li><a href="http://www.deutschland.de/home.php?lang=2">Deutschland.de Official Germany portal</a></li>
<li><a href="http://www.cometogermany.com/">Germany Travel Info</a></li>
</ul>
</div>
</td>
</tr>
</table>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$("#report tr:odd").addClass("odd");
$("#report tr:not(.odd) .slide").hide();
$("#report tr:first-child .slide").show();
$("#report tr.odd").click(function(){
// $(this).next("tr").toggle();
$(this).next("tr").find(".slide").slideToggle("slow");
$(this).find(".arrow").toggleClass("up");
});
});
</script>
</body>
</html>
It’s just one extra nested div.
That is perfect! Thank you! The thought of using a column span had not occurred to me.
Hello again. Please check my updated jsFiddle:
I added a couple paragraph tags to the “Canada” section. Why does expanding the Canada section mess up the other headers and change the width of the table, and how do I prevent that? If we expand other sections everything looks fine.
This was tricky…
That <td> that holds Canada…That element needs width:1px on it. Making it only as wide as it needs to be. I made it inline to show you. I’d give the <td> a class and move the width:1px style to that class.
<td colspan="5" style="width:1px;">
<div class="slide">
<p>Flag of Canada</p>
<h4>Additional information</h4>
The table was doing exactly what it should - expand as needed. No other tab actually has paragraphs to it. Yours does have a lot of content so it’s expanding as wide as it needs to.
Hi,
Tables are shrink to fit and presently the table fits the content it sees. Once you reveal those p elements then the table gets pushed as wide as it can (because that’s what tables do).
You need to set a width on the table:
e.g.
#report{width:100%;max-width:980px;margin:auto}
Or a fixed width if you want.
That should fix the issue 
Fantastic! Thank you!
If you want the table to be shrink to fit then Ryan’s method will work to keep the table at the minimum width possible.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.