Expandable Sidebar Menu Screencast

Posted on by

This is the first (of hopefully many) screencasts that will provide a quick tutorial to a simple demo of jQuery in action. I plan on doing at least 2-3 more based upon the talks that I’ve given lately – hopefully I can trickle those out over the next week(s) or so. (Oh, and sorry if I sound tired – that’s because I am.) Enjoy!



jQuery Demo – Expandable Sidebar Menu on Vimeo

Or: Watch the original (.mov, 3.85MB) video. (I suspect that this version is much clearer – but not everyone supports Quicktime files)

File Downloads:

98 thoughts on “Expandable Sidebar Menu Screencast”

  2. Jason on said:

    You’re very good at explaining everything, but I really think you should make these when you’re less tired. :)

  3. Matt on said:

    Looks good! I look forward to more of these as time goes on.

    On a side note; that type of menu is typically referred to as an “Accordian Menu” rather than an “Expandable Sidebar Menu.” To draw more attention to your screencasts, I’d suggest using the common names for design patterns like that. ;)

  5. John Resig on said:

    @Jason: Duly noted ;-)

    @Matt: Sigh, yes – Accordian menu. At 3:30am everything just becomes “expandable sidebar menus”.

    @Erin: I’m using Subethaedit for the Mac (try the free version). It has real-time collaborative editing and that real-time web preview. I love it!

  6. Rich on said:

    Great Screencast! I’m looking forward to more of these. I’d like to see a screencast on ajax functionalities as well as jQuery form usage.

    Thanks,
    Rich

  10. Joel Birch on said:

    This is great John. I think these screencasts will really help flick the switch of jQuery enlightenment for many people. The one or two web designers that I know are non-scripters and may feel like achieving such a seemingly complex effect is out of their depth. I know that when they see this screencast it will be like an epiphany for them.

  12. Pingback: Expandable Sidebar Menu, el acordeón de jQuery - aNieto2K

  13. Pingback: First jQuery Screencast by John Resig at There was Code; Then there was AJAX!

  15. John Resig on said:

    @zig: I’m not sure what you’re referring to – this screencast demoed the code in both Firefox 2.0 and Safari 2.0. Can you reproduce this result?

  20. Grant Holman on said:

    Great demo, John. Things like this really help simple folk like myself to ‘get’ jquery.

    Quick question: Is it possible to prevent the DD block from sliding up then back down if it is already expanded?

    Cheers
    Grant

  21. Jörn Zaefferer on said:

    Hey Grant,

    you can save a reference to the currently active part of the menu and refer to that to prevent what you mention.

    If you need that and maybe some more features, take a look at my .

  24. Pingback: Weblogger.ch » jQuery: links

  25. Pingback: bassistance.de » Release: Accordion menu plugin for jQuery

  26. Pingback: jQuery: Accordian Menu in 10 lines « Rip’s Domain

  27. Pingback: Expandable Sidebar Menu with jQuery :: Tech Videos, Screencasts, Tutorials, Webinars

  28. jeremy on said:

    to make sure the currently opened dd block doesn;t slide up and down, you can also just check if its open, and then do nothing.

    if its open then $(this).parent().next() will be visible..
    so you could wrap the whole thing in an

    if(!$(this).parent().next().visible()){
    //do the cool stuff
    }

    ** caveat – i’m a jQuery newb, and not sure if .visible() is a property it can return.. (John?)

  29. Gary Sinise on said:

    This is awesome, I read through a lot of the documentation before seeing this screencast and only kind of understood how to implement something like this, seeing the screencast makes it totally clear. Thanks a ton! where’s the donate button again ;-)

  30. coyr on said:

    hi, your acordion menu is amazing, congratulation ;). I want to know, which license type is it? i can’t see anyone. thanks!!

  31. Miejsca on said:

    Could anyone help me with expanding functionality of this script with cookies (remembering states) + some switches to make predefined tabs collapsed/expanded by default?

    I’d like to have similar functionality to that of menu of this site: http://miejsca.org/

    I am willing to pay if needed and then share the code with everyone, please mail me at mikolaj-i [at] o2 . pl

  32. Henrik on said:

    Slightly off topic, sorry for this, but what program or application are you using in this screen cast for editing the files? I’m a PC-dude ‘jumping ship’ to mac since I’ve had enough with spending time dealing with the OS…

    Thanks John, and perhaps all others that might answer my question.

  34. Ty on said:

    I probably won’t understand the answer, but it won’t stop me from asking the question…
    What would you change in the setup to make some buttons clickable, and go directly to the page, instead of dropping down, as they all do now.
    thanks for any hints/ solutions.

  35. italo on said:

    how i create this menu, but i need some links expand and some not…?? i just need a link to be open on click… please respond me!!

  36. {j}sTyler on said:

    Hey I’ve got a version online here, looking good using png image buttons.
    I’ve removed the :not(:first) from the $(“dd”).hide();
    part of the function.
    How would I go about
    Link to the current working version demo:
    http://70.133.226.219/v2/jqueryAccordion.htm

    In other words what I am trying to do, and probably the preferred behavior is:
    have the menu load with all button’s closed, clicking on a button toggles that submenu, either open or close.
    An alternate bahavior that would be nice would be to define by a class, that a particular button goes directly to it’s hyperlink when clicked, because it has no sub-menu.
    Thanks for any help. Show me any coded solutions to any of these concepts would be great, not the best j-script’er.
    Thanks alot.

  37. {j}sTyler on said:

    Thanks so much to SebDuggan.com:
    For providing me with the code solution to make the buttons open and close when clicked (toggle) rather than open and open again (blink) as John’s demo does…
    Here’s the code from Seb:————
    $(‘dt a’).click(function(){
    $(this).parent().next().siblings(‘dd:visible’).slideUp(‘slow’);
    $(this).parent().next().slideToggle(‘slow’);
    return false;
    });
    ————-
    It replaces this part of the code in the example from John:
    ———————————————–
    $(“dt a”).click(function(){
    $(“dd:visible”).slideUp(“slow”);
    $(this).parent().next().slideDown(“slow”);
    return false;
    });
    ——————
    All there is to it, works sweet!!
    Ty

  39. Pingback: health care products

  40. Pingback: life insurance corporation

  41. Pingback: caffein free diet pills

  42. Pingback: atlas direct student travel insurance

  45. Kent Davidson on said:

    John-

    Recently switched to Mac – what is the text editor you are using, and the “simple” browser with the automatic refresh? Looking at switching from prototype.js to jquery.js and am liking what I see so far. Thanks!

  46. Suvi on said:

    Cool! I have made two new features:

    $(“dd:not(#inicio)”).hide();
    $(“dt a”).click(function(){
    $(this).parent().next().siblings(“dd:visible”).slideUp(“fast”);
    $(this).parent().next().slideDown(“fast”);
    return false;
    });

    Typing dd:not(#inicio) we can labeled with id=”inicio” a start opened row.

    Based in the code of {j}sTyler(http://jquery.com/blog/2006/11/14/expandable-sidebar-menu-screencast/#comment-16193), with this code the menu don’t do nothing cliking in a opened row.

  47. victor on said:

    Suppose the page address ends with page.htm#abc
    How can I make the div (or dd that follows dt) with id=”abc” visible?

    The jquery code for showing/hiding:


    $(document).ready(function(){
    $("dd:not('.open')").hide();
    $("dt a").click(function(){
    $("dd:visible").slideUp("slow");
    $(this).parent().next().toggle("slow");
    return false;
    });
    });

  49. Pingback: zahlenzerkleinerer » Blog Archive » Ajax - Asynchronous JavaScript and XML

  50. Baskie on said:

    Does anyone if it’s possible to make a sub sub menus with this code? If you had more options to choose from as you keep drilling down to be more specific for what your looking for.