Response title
This is preview!
Accordion heading not collapsing when list is active
in Using jQuery Plugins
•
12 years ago
Hi everyone,
I'm new to jquery - so far so good except for one small problem in my current job.
The website i'm working on is this: http://www.davidvaggphotography.com.au
It's all ready to go, except an issue with the navigation menu. I want Photos to collapse when one of the list items (under Photos when expanded) is active. Currently Photos does collapse when the same-level list items are active, but not its "child list items". I hope it's a simple fix, and something to be customized in my accordion.js file, which I haven't altered.
Below is the code taken from my index page, and my untouched accordion.js code is located here: http://davidvaggphotography.com.au/js/accordion.js. Any help would be great appreciated!
<head>
...
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/accordion.js"></script>
<script type="text/javascript">
jQuery().ready(function(){
// applying the settings
jQuery('#theMenu').Accordion({
active: 'h3.selected',
header: 'h3.head',
alwaysOpen: false,
animated: true,
showSpeed: 400,
hideSpeed: 800
});
});
</script>
</head>
...
<div id="navigation">
<ul id="theMenu">
<li>
<h3 class="head"><a href="javascript:;">PHOTOS</a></h3>
<ul class="menu-photos">
<li><a href="photos-portraits.html">PORTRAITS</a></li>
<li><a href="photos-music.html">MUSIC</a></li>
<li><a href="photos-weddings.html">WEDDINGS</a></li>
<li><a href="photos-observations.html">OBSERVATIONS</a></li>
</ul>
</li>
</ul>
<ul class="menu-main">
<li><a href="about.html">ABOUT</a></li>
<li><a href="http://davidvaggphotography.blogspot.com/" target="_blank">BLOG</a></li>
<li><a href="shop.html">SHOP</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
I'm new to jquery - so far so good except for one small problem in my current job.
The website i'm working on is this: http://www.davidvaggphotography.com.au
It's all ready to go, except an issue with the navigation menu. I want Photos to collapse when one of the list items (under Photos when expanded) is active. Currently Photos does collapse when the same-level list items are active, but not its "child list items". I hope it's a simple fix, and something to be customized in my accordion.js file, which I haven't altered.
Below is the code taken from my index page, and my untouched accordion.js code is located here: http://davidvaggphotography.com.au/js/accordion.js. Any help would be great appreciated!
<head>
...
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/accordion.js"></script>
<script type="text/javascript">
jQuery().ready(function(){
// applying the settings
jQuery('#theMenu').Accordion({
active: 'h3.selected',
header: 'h3.head',
alwaysOpen: false,
animated: true,
showSpeed: 400,
hideSpeed: 800
});
});
</script>
</head>
...
<div id="navigation">
<ul id="theMenu">
<li>
<h3 class="head"><a href="javascript:;">PHOTOS</a></h3>
<ul class="menu-photos">
<li><a href="photos-portraits.html">PORTRAITS</a></li>
<li><a href="photos-music.html">MUSIC</a></li>
<li><a href="photos-weddings.html">WEDDINGS</a></li>
<li><a href="photos-observations.html">OBSERVATIONS</a></li>
</ul>
</li>
</ul>
<ul class="menu-main">
<li><a href="about.html">ABOUT</a></li>
<li><a href="http://davidvaggphotography.blogspot.com/" target="_blank">BLOG</a></li>
<li><a href="shop.html">SHOP</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</div>
1