IE Text Disappears after hide call.
Sorry for the long example, but this problem has been stumping me for
quite awhile now. I have an HTML page that I create through a jsp
that renders as shown below (I've tried to cut out extraneous details
but leave in all the important parts, I've also made all classes/
values generic). I've also included my JQuery code.
The problem that happens is that about 10% of the time this page
loads, the text in the "details Text" section won't appear in Internet
Explorer (both 6 and 7). If you then select the text it reappears, or
if you click on the toggle div it also reappears. Firefox 2 and 3
haven't shown any problems.
I've been able to determine that the line "$
('#SectionThatHidesAppears').hide();" is somehow causing the problem.
If I comment it out the problem doesn't occur. Even when I hide/
display the element by repeatedly clicking on the toggle div. Any
ideas at all?
JQuery Code
$(function() {
... Bunch of code ...
// Attach toggle handler to "Why Instruction" button
$('#toggler').toggle(
function() {
$('#toggler').removeClass('Closed');
$('#toggler').addClass('Open');
$('#SectionThatHidesAppears').show();
$('#arrow').attr('src', 'images/downarrow_black.gif');
},
function() {
$('#SectionThatHidesAppears').hide();
$('#toggler').removeClass('Open');
$('#toggler').addClass('Closed');
$('#arrow').attr('src', 'images/rightarrow_black.gif');
}
);
//Hide elements that will only be revealed by clicking.
$('#SectionThatHidesAppears').hide();
});
HTML
...
<div id="body">
<div>
<div class="leftText">
<span class="mainTitle leftIndent"> Some Name </span>
</div>
<div class="rightExtra"><div id="editButton">
<input id="edit" type="button" value="Edit" />
</div></div>
<div class="clearElement"> </div>
</div>
<div id="detailsText">
<span>Some Category: </span><span class="bold">Some category value</
span><br/>
<br/>
<span>Some Category: </span><span class="bold"></span><br/>
<br/>
<span>Some Category: </span><span class="bold">
Detail 1,
Detail 2,
Detail 3
</span>
<br/>
<br/>
</div>
<div id="MoreDetails">
<div is="toggler" class="closed">
<img id="arrow" src="images/rightarrow_black.gif"
border="0"> <span class="fakeLink">Click to Open</span>
</div>
<div id="SectionThatHidesAppears">
<div>
<span>Some text</span>
</div>
<br/>
<br/>
<div class="someLabel">
<span class="someTag leftText">Some text</span>
<div id="somethingToClick" class="key rightExtra"><img id="arrow"
src="images/right_arrow.gif" border="0" /> Key</div>
<div class="clearElement"> </div>
</div>
<table class="studentSkillsTable">
<thead>
<th colspan="2">A Heading</th>
<th><span class="name">A heading</span><span class="tooltip">A
tooltip.</span></th>
<th><span class="name">A heading</span><span class="tooltip">A
tooltip.</span></th>
</thead>
<tbody>
<tr
class="trTop"
>
<td class="Icon">
<img src="images/icon.gif"/>
</td>
<td class="name">
Smith, Joe
</td>
<td
>
<img src="images/1.gif" />
</td>
<td
class="ImportantColumn"
>
<img src="images/1.gif" />
</td>
</tr>
<tr
>
<td class="Icon">
<img src="images/icon.gif"/>
</td>
<td class="name">
Smith, Jane
</td>
<td
>
<img src="images/1.gif" />
</td>
<td
class="ImportantColumn"
>
<img src="images/2.gif" />
</td>
</tr>
<tr
class="trBottom"
>
<td class="Icon">
<img src="images/icon.gif"/>
</td>
<td class="name">
Wong, Jerry
</td>
<td
>
<img src="images/1.gif" />
</td>
<td
class="ImportantColumn"
>
<img src="images/2.gif" />
</td>
</tr>
</tbody>
</table>
</br>
</div>
</div> <!-- end MoreDetails -->
</div>
...