Hi,
I try make
a multi level accordion with jquery:
<div class="acordion">
<a href="#"><h1>aaa</h1></a>
<div class="acoTitulo">
<h1>aaa</h1>
<div class="acoSubTitulo">
<a href="#"><h2>bbb</h2></a>
<div class="acoSubSubTitulo">
<h2>bbb</h2>
<div class="acoLink">
<a href="#">ccc</a><br>
<a href="#">ccc</a>
</div>
</div>
</div> <!-- acoSubTitulo -->
</div> <!--
end acoTitulo -->
<div class="acoTitulo">
<h1>aaa</h1>
<div class="acoSubTitulo">
<a href="#"><h2>bbb</h2></a>
<div class="acoSubSubTitulo">
<h2>bbb</h2>
<div class="acoLink">
<a href="#">ccc</a><br>
<a href="#">ccc</a>
</div>
</div>
</div> <!-- acoSubTitulo -->
</div> <!--
end acoTitulo -->
<div class="acoTitulo">
<h1>aaa</h1>
<div class="acoSubTitulo">
<a href="#"><h2>bbb</h2></a>
<a href="#"><h2>bbb</h2></a>
</div> <!-- acoSubTitulo -->
</div> <!--
end acoTitulo -->
<a href="#"><h1>aaa</h1></a>
<a href="#"><h1>aaa</h1></a>
<div class="acoTitulo">
<h1>aaa</h1>
<div class="acoSubTitulo">
<a href="#"><h2>bbb</h2></a>
<a href="#"><h2>bbb</h2></a>
</div> <!-- acoSubTitulo -->
</div> <!--
end acoTitulo -->
<div class="acoTitulo">
<h1>aaa</h1>
<div class="acoSubTitulo">
<a href="#"><h2>bbb</h2></a>
<a href="#"><h2>bbb</h2></a>
</div> <!-- acoSubTitulo -->
</div> <!--
end acoTitulo -->
</div> <!--
end acordion -->
.acordion h1, .acordion h2, .acoLink {
font-size: 11px;
padding: 8px;
}
.acoTitulo h2 {
margin: 0px;
}
.acordion *
a, .acordion
a {
text-decoration:none;
color: #fff;
}
.acordion {
width: 160px;
color: #fff;
background-color: #06f;
border: 1px solid #06f;
}
.acoSubTitulo {
background-color: #09f;
}
$(document).ready(function(){
$(".acoSubTitulo").hide();
$(".acoLink").hide();
$(".acoTitulo").hover(
function(){
$(this).find(".acoSubTitulo").slideToggle("slow");
},function(){
$(this).find(".acoSubTitulo").slideToggle("slow");
}
);
$(".acoSubSubTitulo").hover(
function(){
$(this).find(".acoLink").slideToggle();
},function(){
$(this).find(".acoLink").slideToggle();
}
);
});
but,
this accordion
is very elusive with the mouse.
any idea?
many thanks.
