That works for me but I do see how this can be refactored:
<a id="stuff" class="baritem" href="#stuff_menu">My Account</a>
<div id="stuff_menu" class="SomeClass">
<a href="##">My Account</a>
<a href="##">More stuff</a>
<a href="##">Here is a menu item</a>
<a href="##">Here is a menu item</a>
<a href="##">Here is a menu item</a>
<a href="##">Here is a menu item</a>
</div>
Notice that I've changed the IDs so that the DIV has the link ID plus
some other string, rather than the other way around.
Also, I've added a class to the DIV to make it easier to set styles.
This isn't strictly necessary.
$(function()
{
/* set up the onclick handler for all links on page load
*/
$('.baritem').click(function()
{
$('#' + this.id + '_menu').toggle();
return false;
});
});
On Mon, Jan 4, 2010 at 4:01 PM, Valerij <[email protected]> wrote:
> Hey guys, I'm trying to create 1 really simple function but it just
> doesn't work!
>
> function showMenu(menu) {
> var menuid = $( "#"+menu );
> var menuRoot = $( "#"+menu+"-root" );
>
> menuid.toggle();
> menuRoot.blur();
> }
>
> What this suppose to do is when you click a link, it will change
> settings of a specific div to "visible"
> The HTML:
>
> <a id="stuff-root" class="baritem" href="javascript:void(0)"
> onclick="showMenu('stuff');">My Account</a>
> <div id="stuff">
> <a href="##">My Account</a>
> <a href="##">More stuff</a>
> <a href="##">Here is a menu item</a>
> <a href="##">Here is a menu item</a>
> <a href="##">Here is a menu item</a>
> <a href="##">Here is a menu item</a>
> </div>
>
>
>
> Why doesn't this work? What am I doing wrong.. When I alert this, I
> get the correct div ids?
>
