bullet list accordion menu header expand + link

[premier]

1) Script Title: Bullet List Accordion Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-bullet.htm

3) Describe problem:

I would like a header on the bullet list accordion menu to link to another page after the menu expands.

I have implemented the following script as per a similar thread intended for the glossy accordion menu.(http://www.dynamicdrive.com/forums/showthread.php?t=33741&page=2)


<script type="text/javascript">
(function($){
$(function(){
$('.menuheader').click(function(){
var l = this.href;
setTimeout(function(){window.location.href = l;}, 300);
});
});
})(jQuery);
</script>


And here is the code from the menu


<ul class="menuheader expandable" href="pnuematicactuators.html">Pnuematic Actuators</ul>


this seems to work fine in IE, how-ever firefox and chrome give an "undefined" error.

probably something stupid i have missed? I am very new to web development and for the love of me cant seem to work out why this wont work.


thanks

[jscheuer1]

I've just updated my demo from that thread. It linked to a now outdated version of the script, and DD has since put in more stringent anti-hotlinking measures that rendered the script forbidden in many cases anyway. The new working demo (also updated in that thread):

http://home.comcast.net/~jscheuer1/side/accordion/glossy_h.htm

Only the first CSS Examples header link gets this new treatment.

On to your problem. The href attribute is not valid for ul, so is probably being ignored. If you were to use getAttribute(), it might work, but would still be invalid. Starting in HTML 5 the data hyphen attribute is valid for all elements. So you could do:


<ul class="menuheader expandable" data-href="pnuematicactuators.html">Pnuematic Actuators</ul>

And in your script code:


<script type="text/javascript">
(function($){
$(function(){
$('.menuheader').click(function(){
var l = this.getAttribute('data-href');
setTimeout(function(){window.location.href = l;}, 300);
});
});
})(jQuery);</script>

Notes:


To be valid the page would need an HTML 5 DOCTYPE. But this will work in virtually all, probably all standards invoking DOCTYPES.


Alternatively, you could put a real link inside the ul, give it the class that allows it to function, and style it to take up the entire ul.


If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.