It appears that the issue is related to PIE.htc and redrawing. To prevent browsers from redrawing, you can simply move the div out of the way and then back again.
<script type="text/javascript">
$(document).ready (function () {
$('#show_div').bind ('click', function () {
// Show it by returning it to its default position
$('#tab_container_3').css ({position: 'static'});
});
$('#hide_div').bind ('click', function () {
// Hide it again by resetting the z-index
$('#tab_container_3').css ({position: 'relative'});
});
});
</script>
Change the CSS code to:
#tab_container_3{
position: relative;
top: -9999px;
}
This effectively moves the element out of the way. By changing the position to static with jQuery, you reset the element back to its default state. An element with a position of static does not accept a z-index, so there's no need to modify that property.
UPDATED
In terms of accessibility considerations, to completely hide content while maintaining accessibility, a reliable approach involves using display: block and visibility: hidden. However, given the issues encountered previously with these properties, opting to hide the parent <li> itself instead of the <a> seemed more appropriate. This was achieved by adding and removing a class based on behavior changes.
The following method appears to achieve this successfully:
$(document).ready (function () {
// Initially hide tab and make it inaccessible
$('#tab_container_3').parent().addClass("element-invisible");
$('#show_div').bind ('click', function () {
$('#tab_container_3').parent().removeClass ("element-invisible");
});
$('#hide_div').bind ('click', function () {
$('#tab_container_3').parent().addClass ("element-invisible");
});
});
Include the following CSS for the added class (#tab_container_3 doesn't require any additional CSS):
.element-invisible {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* For IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
visibility: hidden;
display: none;
}
After testing in Firefox, the hidden tab remains undiscoverable during searches.
Note: The initial three positioning and clipping rules are likely unnecessary with this approach. Although I experimented with applying them directly to the a tag first, leading to incomplete results in IE, transitioning the class to the parent li resolved this issue. For reference, these rules remain included to showcase attempted solutions.
Third Time Lucky
A combination strategy was implemented this time, initially placing the parent li off-page with a negative z-index, followed by a delay to conceal and adjust the z-index after 0.5 seconds. This tactic aimed at ensuring PIE.htc properly rendered corners before hiding them. While the effect isn't entirely seamless in IE due to the drawing process used by PIE.htc, the corners now render correctly. Utilizing slide down to reveal the div appeared to limit the jagged appearance of IE's reveal animation.
$(document).ready (function () {
// Initially hide tab but ensure accessibility, allowing link to render before subsequently concealing it within 0.5 seconds
$('#tab_container_3').parent().css('top','-9999px').delay(500).hide('fast', function() {$(this).css({'top' : '0px'});});
$('#show_div').bind ('click', function () {
$('#tab_container_3').parent().slideDown(200);
});
$('#hide_div').bind ('click', function () {
$('#tab_container_3').parent().hide(100);
});
});