I am facing an issue where my div elements are supposed to toggle visibility using jQuery's "slideToggle" function (I'm utilizing jquery-1.2.6.min.js). This functionality is working as expected! However, I am encountering a problem specifically with CSS in IE 8. There are times when my "title divs (elements with black backgrounds)" get stuck together, although this does not happen consistently.
You can view an example at
Is there anyone who could provide assistance? Or shed some light on what might be causing the difference in behavior between IE8 and other versions of Internet Explorer?
Here is my jQuery code:
$(document).ready(function(){
$("div.tekst1").toggle();
$("div.tekst2").toggle();
$("div.tekst3").toggle();
$("div#titel1").click(function(event){
$("div.tekst1").slideToggle('slow');
if ( $("div.tekst2").is(':visible') ) {
$("div.tekst2").slideToggle('1500');
}
if ( $("div.tekst3").is(':visible') ) {
$("div.tekst3").slideToggle('1500');
}
});
$("div#titel2").click(function(event){
$("div.tekst2").slideToggle('slow');
if ( $("div.tekst1").is(':visible') ) {
$("div.tekst1").slideToggle('1500');
}
if ( $("div.tekst3").is(':visible') ) {
$("div.tekst3").slideToggle('1500');
}
});
$("div#titel3").click(function(event){
$("div.tekst3").slideToggle('slow');
if ( $("div.tekst1").is(':visible') ) {
$("div.tekst1").slideToggle('1500');
}
if ( $("div.tekst2").is(':visible') ) {
$("div.tekst2").slideToggle('1500');
}
});
});
This is my CSS styling:
.item{
width:200px;
font-size:12px;
font-family:arial;
margin-bottom:10px;
}
#titel1, #titel2, #titel3{
background-color:#000;
text-transform:uppercase;
color:#fff;
cursor:pointer;
margin-bottom:5px;
margin-top:5px;
}
.titel1{
margin-top:0px;
}
.tekst1, .tekst2, .tekst3{
margin:0px;
}