I have the following script with uses the Element.slide and
Element.fade methods to hide/show a couple of elements on my page. It
works fine in Safari 3 and Firefox 3, but not in Firefox 2. If
the .try-data element get displayed when the pages loads (using
Element.slide('hide')), checking the checkbox does slide the .try-data
element out, but checking the box again to make it slide in does
nothing. So it's almost as if calling Element.slide('hide') prevents
Element.slide('in) from working in Firefox 2.
<script type="text/javascript">
<!--
window.addEvent('domready', function() {
// Only display instructors and staff for try if try is selected
var tu = $('id_triedUnsuccessfully');
tu.addEvent('change', function(event) {
var checked = tu.get('checked');
$$('.try-data').each(function(item) {
item.slide(checked ? 'in' : 'out');
});
$$('.inline-try-data').each(function(item) {
item.fade(checked ? 'in' : 'out');
});
});
if ( !tu.get('checked') )
{
$$('.try-data').each(function(item) {
item.slide('hide');
});
$$('.inline-try-data').each(function(item) {
item.fade('hide');
});
}
});
//-->
</script>
<table class="instructors staff">
<tr>
<td><input type="checkbox" name="triedUnsuccessfully"
id="id_triedUnsuccessfully" /></td>
<td colspan="2">Tried unsuccessfully <span class="inline-try-
data">by</span></td>
</tr>
<tr>
<td></td>
<td>
<table class="instructors staff try-data">
<tr><th>Instructors</th><th>Staff</th></tr>
<tr>
...
</tr>
</table>
</td>
</tr>
</table>
