Looks like there are a few issues here.
First, the top-level <ul> isn't closed. Second, there is no "a"
element inside the h3. It's not necessary to have it for the effect,
but the code should reflect that it isn't there. Try this for the HTML:
<ul id="Menu">
<li id="current_cat">
<h3>Accessories</h3>
<ul>
<li> sub menu links</li>
<li> sub menu links</li>
<li> sub menu links</li>
<li> sub menu links</li>
<li> sub menu links</li>
</ul>
</li>
</ul>
Next, it looks like you want to initially hide the 2nd-level <ul>
elements. You can do that like this:
$('#Menu ul').hide();
No sense in using .slideUp(1) there since the "1" is referring to the
number of milliseconds. The point is, you want the set of matched
elements to be hidden when the DOM is ready.
Now, it looks like you want to use .slideToggle() to show and hide
the <ul> immediately following the h3. You can do that this way:
$('#Menu h3').click(function() {
$(this).next('ul').slideToggle('fast');
});
You don't need to add any custom "slide" attributes. The .slideToggle
() method will slide it down if it's hidden and slide it up if it's
visible.
So, here is the code, wrapped in document.ready:
$(document).ready(function() {
$('#Menu ul').hide();
$('#Menu h3').click(function() {
$(this).next('ul').slideToggle('fast');
});
});
If you really want to put an <a> inside the <h3>, you could write the
code like this:
$(document).ready(function() {
$('#Menu ul').hide();
$('#Menu h3 > a').click(function() {
$(this).parent().next('ul').slideToggle('fast');
return false;
});
});
Hope that helps.
Cheers,
--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Feb 19, 2007, at 7:38 PM, fatjoez wrote:
discovered collapsible menu tutorial by pixel carnage. Got it
working all
except for the fact that if I wrap the Expand/Collapse link with
<h3> (for
styling purposes) the expan/collap fails...
Heres the tutorial by PixelCarnage:
http://pixelcarnage.net/articles/development/jquery-collapsible-menu/
Very straightforward & I tried to modify the javascript to handle the
surrounding h3 but to no avail!
My code so far:
<ul id="Menu">
<li id="current_cat"><h3> # Accessories </h3>
<ul>
<li> sub menu links</li>
<li> sub menu links</li>
<li> sub menu links</li>
<li> sub menu links</li>
<li> sub menu links</li>
</ul>
</li>
========== THE JAVA SCRIPT ==============
$("#Menu > li > h3 > a + ul").attr("slide", "down");
// Collapse everything but the first menu:
$("#Menu > li > h3 > a").not(":first").find("+
ul").slideUp(1).attr("slide", "up");
// Expand or collapse:
$("#Menu > li > h3 > a").click(function() {
// Collapse open menu:
$(this).find("#Menu > li > h3 > a +
[EMAIL PROTECTED]'down']").slideUp("fast").attr("slide", "up");
// Expand this menu:
$(this).find("+ ul").slideToggle("fast").attr("slide", "down");
});
--
View this message in context: http://www.nabble.com/collapsible-
menus-%7E-pixel-carnage-tf3256095.html#a9052548
Sent from the JQuery mailing list archive at Nabble.com.
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
