This is going to be an issue:
.attr("style") == "display: none;"
Up until just the other day, that wasn't working in IE (it's fixed
now, and it will be in jQuery 1.1.4). In the meantime I recommend that
you do:
.is(":hidden")
or:
.css("display") == "none"
--John
On 7/24/07, webrocker <[EMAIL PROTECTED]> wrote:
Hello group,
I try to dynamically add some tags and content to an existing element
(basically a toggle-link, that's only to be seen if JS is active and
that slideToggles a div). Somehow my code doesn't work in IE, although
it works fine in other browsers like Firefox or Safari:
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++
JQuery:
$(document).ready(function(){
// hide div on pageready:
if( $("div.reduction-wrap") ){
$("div.reduction-wrap").hide();
// add toggle link with icon to headline
with( $("#toggle-link") ){
children('img').append('<img src="images/pfeil-blau-r.gif"
id="toggle-icon" alt="">');
append(' <span>show</span>');
html( '<a href="javascript:;"
id="reduction-toggle">'+$("#toggle-
link").html()+'</a>');
}
// click on link toggles hidden div:
$("#reduction-toggle").click( function() {
$("div.reduction-wrap").slideToggle("normal",
function(){
if( $("div.reduction-wrap").attr("style") ==
"display: none;") {
$("#reduction-toggle").children("span").html("show");
$("#toggle-icon").attr({src:"images/pfeil-blau-r.gif", id:
"toggle-icon", alt: ""});
} else {
$("#reduction-toggle").children("span").html("hide");
$("#toggle-icon").attr({src:"images/pfeil-blau-u.gif", id:
"toggle-icon", alt: ""});
}
});
// make sure nothing happens with the link:
this.blur();
return false;
});
}
});
HTML:
<h3 id="toggle-link"><img src="images/icon-reductions.gif" alt="" />
Title</h3>
<div class="reduction-wrap">content</div>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++
What is wrong with that? IE will hide the div, but no link-markup is
inserted to the html.
Thanks for any hint or shove in the right direction...
Tom
