Forum Moderators: open
I have pulled the code out, but not it doesn't even work on my local machine.
Firefox and other browser don't complain about any JavaScript errors and IE6 is not an easy browser to debug.
If you notice anything out of place or incorrect, please let me know. Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css" media="screen">
#test { border: 1px solid red; }
.heading { cursor: pointer; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('.heading').click(function(){
expand_blah($(this));
});
});
var expand_blah = function( element )
{
// Check to prevent animation on already expanded element
if ( $(element).next('.content').css("display") != "none" ) {
return;
}
var blah = $(".content");
$(".arrow").css({"background-position" : "0px 0px"});
blah.slideUp("fast", function() {
$(element).children(".arrow").css({"background-position" : "0px -9px"});
$(element).next('.content').slideDown("slow");
});
};
</script>
</head>
<body>
<div id="test">
<h1>Test</h1>
<div class="heading">
Heading 1
<div class="arrow" style="background-position: 0px 0px;"/>
</div>
<div class="content" style="display: none;">
<img width="60" height="56" border="0" src="logo.gif"/>
1111111 Details<br/>
</div>
<div class="heading">
Heading 2
<div class="arrow" style="background-position: 0px -9px;"/>
</div>
<div class="content" style="display: none;">
<img width="60" height="56" border="0" src="logo.gif"/>
2222222 Details<br/>
</div>
</div>
</body>
</html>
<div class="heading">
Heading 1
<div class="arrow" style="background-position: 0px 0px;"/>
</div>
<div class="heading">
Heading 1
<div class="arrow" style="background-position: 0px 0px;"></div>
</div>
With regard to the <div /> causing the error, the actual code is <div></div>, but when I copied the HTML, Firebug converted it to <div /> and I overlooked this when I pasted it here. Thank you for the suggestion.
