On 20/02/07, Karl Swedberg <[EMAIL PROTECTED]> wrote:
> Ah yes, that's pretty straightforward.
>
> One way to do this would be to put "Show/Hide" inside a <span> and
> use the <a> for the actual link.
>
> HTML:
> <ul id="Menu">
>    <li id="current_cat">
>      <h3><span>Show/Hide</span <a
> href="accessories.htm">Accessories></a></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>
>
>
> jQuery:
>
> $(document).ready(function() {
>    $('#Menu ul').hide();
>    $('#Menu h3 > span').click(function() {
>      $(this).parent().next('ul').slideToggle('fast');
>    });
> });
>
> If you want the <span> to be highlighted somehow on hover, see my
> most recent tutorial:
> http://www.learningjquery.com/2007/02/quick-tip-set-hover-class-for-
> anything
>
> Cheers,
>
> --Karl
> _________________
> Karl Swedberg
> www.englishrules.com
> www.learningjquery.com

Or if you want it to make sense when JavaScript is off, remove the
span, and add it via jQuery:

$(document).ready(function() {
  $('#Menu ul').hide();
  $('#Menu h3').prepend("<a class='toggler' href='#'>Show / Hide</a>
").find("a.toggler").click(function() {
    $(this).parent().next('ul').slideToggle('fast');
    return false;
  });
});

A bit more code, but it will be styled as a link.

>
>
>
> On Feb 20, 2007, at 2:31 AM, fatjoez wrote:
>
> >
> > Hey.
> >
> > Dont worry about my code ay.
> >
> > All I'm basically asking is that in reference to the code pixel
> > carnage
> > provides as an example on his site, is it possible to modify this
> > so that on
> > the same Line as the Menu link which opens/closes a sub menu, is it
> > possible
> > also to add a LINK to an actual page also.
> >
> > So that instead of it being like
> >
> > [clikToToggleMenu]Menu1[/click]
> > sub menu link 1
> > sub menu link 2
> >
> >
> > INSTEAD to have it like this
> >
> > [clikToToggleMenu]Show/Hide[/click]   [link]Menu1[/link]
> > sub menu link 1
> > sub menu link 2
> >
> > Do you understand what I mean? So I want to have like a + / -
> > symbol to
> > expand collapse the menu and on the SAME line to have a link to
> > another
> > menu. Basically so I can show the link to the Parent category also!
> > --
> > View this message in context: http://www.nabble.com/collapsible-
> > menus-%7E-pixel-carnage-tf3256095.html#a9055526
> > Sent from the JQuery mailing list archive at Nabble.com.
> >
> >
> > _______________________________________________
> > jQuery mailing list
> > discuss@jquery.com
> > http://jquery.com/discuss/
>
>
> _______________________________________________
> jQuery mailing list
> discuss@jquery.com
> http://jquery.com/discuss/
>

_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/

Reply via email to