Accordion with sublevels allways showing
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var lastTouched;
var lastType;
var lastContent;
var boxTop = 125;
function resizeElements() {
var width = screen.availWidth;
var height = screen.availHeight;
if (width==240) boxTop = 63;
if (width>480) { width=480; height=684; }
window.resizeTo(width,height);
}
function toggleBox(type, content) {
if ($("div:animated").size()>0) return;
var infoBox = $("#infoBox");
var boxHeight = parseInt($(infoBox).height(),10);
if ($(infoBox).css("display") == "none")
{
$("li.item").hide();
$(infoBox).html(content);
boxHeight = parseInt($(infoBox).height(),10);
$(infoBox).removeClass().addClass(type);
$(infoBox).css("top",((boxHeight)*-1));
$(infoBox).css("display","block");
$(infoBox).animate({top:(boxTop)+"px"},500);
}
else
{
lastType = type;
lastContent = content;
$(infoBox).animate({top:(boxHeight*-1)+"px"},500,function(){
$("#infoBox").css("display","none");
if ($("#infoBox").hasClass(lastType) == false) setTimeout(function(){ toggleBox(lastType,lastContent); },100);
else $("#infoBox").removeClass();
});
}
}
resizeElements();
$("#btnPhone").click(function(){
var content = "<a class=\"phoneNumber\">Números úteis</a>"+
"<a class=\"phoneNumber\" href=\"mailto:\"><b>test</b><span>test</span></a>";
toggleBox("phone",content);
});
$("#btnInfo").click(function(){
var content = "test";
toggleBox("info",content);
});
$("li.item").hide();
$("li.title").click(function(){
if ( $(this).next().css("display") == "block" )
$(this).next().slideUp("normal");
else
$(this).next().slideDown("normal");
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="bgBox"></div>
<div id="topBar">
<a id="btnPig"></a>
<a id="btnPhone"></a>
<a id="btnInfo"></a>
</div>
<div id="infoBox">
test
</div>
<div id="bodyContent">
<ul id="lstMain">
<li class="title">test1</li>
<li class="item">
<ul class="1stSub">
<li class="title">test2</li>
<ol class="1stSub">
<li class="title">test3</li>
<li class="item">test4</li>
<li class="title">test5</li>
<li class="item">test6</li>
</ol>
<li class="title">test7</li>
<li class="item">test8</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Hello.
This is my code.
What is happening is that i have an accordion with sublevels, but it´s not working properly.
When i click on Test1, it should only show test2 and test7, but it is showing test3 and test5 (that are insinde test2), that only should be visible when clicking test2.
Can anyone help please?
Thanks in advance