Question

I m trying to show and hide some elements(span) using jquery fadeIn and fadeOut method so I used following code:

<script type="text/javascript">
$(document).ready(function(){

$("a.moretag").click(function(){
$("span.hideelement").fadeIn("slow");
$("a.moretag").fadeOut("slow");
$("a.lesstag").fadeIn("slow");
});


$("a.lesstag").click(function(){
$("span.hideelement").fadeOut("slow");
$("a.lesstag").fadeOut("slow");
$("a.moretag").fadeIn("slow");
});

});

</script>

 .....
 <span class="hideelement" style="display:none;">First</span>
 <span class="hideelement" style="display:none;">Second</span>
 .
 .
 <span class="hideelement" style="display:none;">Tenth</span>
 <a class="moretag"><strong>More</strong></a>
 <a class="lesstag" style="display:none;"><strong>Less</strong></a>
 .....

In above code when user clicks “more” link it will display previously hidden elements(display:none), more link is disappear and “less” link is displayed vice-vers.

Here when I clicked “More” link it works fine means it disappears and displays “Less” link vice-ver. but it doesn’t show/hide hidden span elements.

This code works great in chrome, mozilla and IE7 but not working in IE8. What’s wrong with code. Please help me.

THANKS in ADVANCE.

Answer 1

You must use fadeOut and FadeIn at IE8. IE9 and IE7 can run it but ib IE8 you cant make fade animations. You can use show() and hide();

    $(document).ready(function(){

$("a.moretag").click(function(){
$("span.hideelement").show("slow");
$("a.moretag").hide("slow");
$("a.lesstag").show("slow");
});


$("a.lesstag").click(function(){
$("span.hideelement").hide("slow");
$("a.lesstag").hide("slow");
$("a.moretag").show("slow");
});

});

Try this function at this link

There is option to use fade effects in IE8, changing display to inherit

Example:

 .MyDiv{
   display:inherit;
 }