Slight problem with this accordion script
Hi All,
I'm just getting into jQuery, and am attempting to build a navigation system which has a horizontal sub-navigation inside a standard vertical one. I was having all sorts of issues with just getting the sub-navigation to show/hide, but am finally beyond that. The only thing now, is that it isn't acting like an accordion at all!
Upon opening, all the sub-navigation items open up, but when clicking any of the main navigation links, it starts to act like an accordion, but I can also completely collapse it as well.
Is there anything I'm missing in the code? I'd like to get it to show up with one sub-navigation visible if possible.
Here's a demo: http://dwcastillo.com/horizontalnavtest.php
and some code:
- <script type="text/javascript">
$(document).ready(function(){
$(".accordion h3").eq(2).addClass("active");
$(".accordion div").eq(2).show();
$(".accordion h3").click(function(){
$(this).next("div").slideToggle("slow")
.siblings("div:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Horizontal Navigation Test</title>
</head>
<body>
<div class="accordion">
<h3>Work</h3>
<div>
<ul class="test3">
<li><div class="handle3">2010</div>
<p><a href="#">one</a></p>
<p><a href="#">two</a></p>
<p><a href="#">three</a></p>
<p><a href="#">four</a></p>
</li>
<li><div class="handle3">2009</div>
<p><a href="#">five</a></p>
<p><a href="#">six</a></p>
<p><a href="#">seven</a></p>
<p><a href="#">eight</a></p>
</li>
<li><div class="handle3">2008</div>
<p><a href="#">nine</a></p>
<p><a href="#">ten</a></p>
<p><a href="#">eleven</a></p>
<p><a href="#">twelve</a></p>
</li>
<li><div class="handle3">2007</div>
<p><a href="#">thirteen</a></p>
<p><a href="#">fourteen</a></p>
<p><a href="#">fifteen</a></p>
<p><a href="#">sixteen</a></p>
</li>
<li><div class="handle3">2006</div>
<p><a href="#">seventeen</a></p>
<p><a href="#">eighteen</a></p>
<p><a href="#">nineteen</a></p>
<p><a href="#">twenty</a></p>
</li>
</ul><div style="clear:both;"></div>
</div>
<h3>Projects</h3>
<div>
<ul class="test5">
<li><div class="handle3">2010</div>
<p><a href="#">one</a></p>
<p><a href="#">two</a></p>
<p><a href="#">three</a></p>
<p><a href="#">four</a></p>
</li>
<li><div class="handle3">2009</div>
<p><a href="#">five</a></p>
<p><a href="#">six</a></p>
<p><a href="#">seven</a></p>
<p><a href="#">eight</a></p>
</li>
<li><div class="handle3">2008</div>
<p><a href="#">nine</a></p>
<p><a href="#">ten</a></p>
<p><a href="#">eleven</a></p>
<p><a href="#">twelve</a></p>
</li>
<li><div class="handle3">2007</div>
<p><a href="#">thirteen</a></p>
<p><a href="#">fourteen</a></p>
<p><a href="#">fifteen</a></p>
<p><a href="#">sixteen</a></p>
</li>
<li><div class="handle3">2006</div>
<p><a href="#">seventeen</a></p>
<p><a href="#">eighteen</a></p>
<p><a href="#">nineteen</a></p>
<p><a href="#">twenty</a></p>
</li>
</ul><div style="clear:both;"></div>
</div>
<h3>About</h3>
<div>
<ul class="test6">
<li><div class="handle3">2010</div>
<p><a href="#">one</a></p>
<p><a href="#">two</a></p>
<p><a href="#">three</a></p>
<p><a href="#">four</a></p>
</li>
<li><div class="handle3">2009</div>
<p><a href="#">five</a></p>
<p><a href="#">six</a></p>
<p><a href="#">seven</a></p>
<p><a href="#">eight</a></p>
</li>
<li><div class="handle3">2008</div>
<p><a href="#">nine</a></p>
<p><a href="#">ten</a></p>
<p><a href="#">eleven</a></p>
<p><a href="#">twelve</a></p>
</li>
<li><div class="handle3">2007</div>
<p><a href="#">thirteen</a></p>
<p><a href="#">fourteen</a></p>
<p><a href="#">fifteen</a></p>
<p><a href="#">sixteen</a></p>
</li>
<li><div class="handle3">2006</div>
<p><a href="#">seventeen</a></p>
<p><a href="#">eighteen</a></p>
<p><a href="#">nineteen</a></p>
<p><a href="#">twenty</a></p>
</li>
</ul><div style="clear:both;"></div>
</div>
<h3>Contact</h3>
<div>
<ul class="test7">
<li><div class="handle3">2010</div>
<p><a href="#">one</a></p>
<p><a href="#">two</a></p>
<p><a href="#">three</a></p>
<p><a href="#">four</a></p>
</li>
<li><div class="handle3">2009</div>
<p><a href="#">five</a></p>
<p><a href="#">six</a></p>
<p><a href="#">seven</a></p>
<p><a href="#">eight</a></p>
</li>
<li><div class="handle3">2008</div>
<p><a href="#">nine</a></p>
<p><a href="#">ten</a></p>
<p><a href="#">eleven</a></p>
<p><a href="#">twelve</a></p>
</li>
<li><div class="handle3">2007</div>
<p><a href="#">thirteen</a></p>
<p><a href="#">fourteen</a></p>
<p><a href="#">fifteen</a></p>
<p><a href="#">sixteen</a></p>
</li>
<li><div class="handle3">2006</div>
<p><a href="#">seventeen</a></p>
<p><a href="#">eighteen</a></p>
<p><a href="#">nineteen</a></p>
<p><a href="#">twenty</a></p>
</li>
</ul><div style="clear:both;"></div>
</div>
</div>
Any help is appreciated!
-David