JSFiddle: http://jsfiddle.net/tahirjadoon/v6FY7/
I have an example set at the above link. My requirement is a table. On tr, it has a jerk to it, and after the tr expands, their is a bounce as well, on all the browsers. How can i make it better?
html
<table class="table-grid">
<tr>
<td><a href="" id="item1" class="expandCollapse collapse">Expand 1</a></td>
<td>100</td>
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td> 1 - 1</td>
</tr>
<tr>
<td> 1 - 2</td>
</tr>
<tr>
<td> 1 - 3</td>
</tr>
<tr>
<td> 1 - 4</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><a href="" id="item2" class="expandCollapse collapse">Expand 2</a></td>
<td>200</td>
</tr>
<tr>
<td colspan="2">
<table>
<tr>
<td> 1 - 1</td>
</tr>
<tr>
<td> 1 - 2</td>
</tr>
<tr>
<td> 1 - 3</td>
</tr>
<tr>
<td> 1 - 4</td>
</tr>
</table>
</td>
</tr>
</table>
CSS
.table-grid {width:85%;border: 0; margin:0 0 20px 1px;border-collapse:collapse;}
.table-grid td {border: 1px solid #c3d9ee;padding:.3em 1.1em;}
.table-grid td, .table-grid td a.expand, .table-grid td a.collapse {color:#000; text-align:left;font: bold 1em Verdana, Arial, Helvetica, sans-serif; }
.table-grid td a.expand { text-decoration: none; padding-left: 20px; color: red; }
.table-grid td a.collapse { text-decoration: none; padding-left: 20px; color: green; }
.table-grid td a.expand:hover, .table-grid td a.collapse:hover { text-decoration: underline; }
JS
$(document).ready(function () {
$(".expandCollapse").closest("tr").next("tr").toggle();
$(".expandCollapse").click(function(){
if ($(this).closest("tr").next("tr").is(':visible')) {
$(this).removeClass("expand").addClass("collapse");
}
else{
$(this).removeClass("collapse").addClass("expand");
}
$(this).closest("tr").next("tr").slideToggle("slow");
return false;
});
});
When converted to divs, slide up and down is slow and there is no jerk/bounce.
Div example: http://jsfiddle.net/tahirjadoon/DuHN8/
html
<h2 class="triggerMax" id="Item1">
<a href="#">Item # 1</a>
</h2>
<div class="toggle_containerMax">
<div class="block">
<p>Text for item 1</p>
<p>Text for item 1</p>
<p>Text for item 1</p>
<p>Text for item 1</p>
<p>Text for item 1</p>
</div>
</div>
<h2 class="triggerMax" id="Item2">
<a href="#">Item # 2</a>
</h2>
<div class="toggle_containerMax">
<div class="block">
<p>Text for item 2</p>
<p>Text for item 2</p>
<p>Text for item 2</p>
<p>Text for item 2</p>
<p>Text for item 2</p>
</div>
</div>
css
.toggleContainerMax { width: 300px; text-align: left; font-family:Arial;font-size: 9pt; }
h2.triggerMax {
padding: 0px; margin: 0px 0px 5px 0px; height: 46px; line-height: 46px; font-size: 15px; font-weight: normal; cursor: pointer;
text-indent:0px; /*this to tackle common h2 style interfering with toggle*/
}
h2.triggerMax a { padding-left:40px; color: #000; text-decoration: none; display: block; }
h2.triggerMax a:active { outline: none; /* hide dotted outline in fire fox*/}
h2.triggerMax a:hover { text-decoration: underline; }
.toggle_containerMax .block {
padding: 15px 20px 10px 20px; /*--Padding of Container--*/
position: relative;
}
h2.activeMax { background-color: yellow; }
JS
$(document).ready(function () {
$(".toggle_containerMax").hide();
$("h2.triggerMax").toggle(function () {
$(this).addClass("activeMax");
}, function () {
$(this).removeClass("activeMax");
});
$("h2.triggerMax").click(function () {
$(this).next(".toggle_containerMax").slideToggle("slow");
});
});