RE: [jQuery] Effects/show callback in Internet Explorer

RE: [jQuery] Effects/show callback in Internet Explorer

You've got errors in your presentation and, consequently, in your behaviour, as Jeffrey Zeldman would say, I reckon.
Here
$
"bio"
.click
function
{}
;
you are applying a selector which should select an element in your DOM with the tag "bio". However, no such element exists - neither in HTML nor XHTML.
The same applies to
$
"clo"
.click
function
{}
;
$
"bio2"
.hide
400
;
Then, in your CSS, you do the same, basically, you're applying the same CSS selector as above, as the argument to the JQuery select function, but an element with the tag "bio2" does not exist in HTML nor XHTML, and it probably never will.
bio2 {}
clo {}
However, you got it right with the class selector:

.content {}
Then, in your HTML, you've got
<bio>
<a onClick="document.getElementById
'bio'
.style.color='#999999';>
bio
</a>
</bio>
As said before, such an element does not exist in HTML nor XHTML, and it probably never will.
Same applies to
<bio2 style="display: none" class="content">
<clo><a onClick="document.getElementById
'bio'
.style.color='#000';">X</a>
</clo>
</bio2>
You need to remove the invalid tags, otherwise your markup will not be valid. So, depending on whether you have one
id
or many
class
elements in the DOM to which effects should be applied, you need to fix your markup first with
<div id="bio2"></div>
or
<div class="bio2"></div>
, then you need to fix your CSS and your JQuery with appropriate selectors, i.e.,
#bio2 {}
or
.bio2 {}
and
$
"#bio2"
or
$
".bio2"
.
Then: remove inline CSS
no good
, inline JS
btw, when you're using JQuery, you should let JQuery do the job, so replace
<a onClick="document.getElementById
'bio'
.style.color='#000';">X</a>
with something that works. Hey, you've already got it in your code, but darn, you've got the HTML and your CSS selectors wrong.
Best regards,
Andreas