treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Accordion menu with scrolling/paging

  • Does anyone know how to add scrolling or paging within an accordion menu?
    Something similar to the right hand menu at Yahoo! Auto (http://autos.yahoo.com)
    but within one of the sub menus so that someone could click through a bunch of
    images in a particular category/menu item. Thanks.
  • I think the best way to do this is to START with a scroller, and then add the accordion inside it.

    I did this on the Chatman Design website. Page scroller with accordions inside it:
    http://chatmandesign.com/print.php

    There is no magic too it, just pick a page scroller you like, alter it up, put accordions inside. Definitely stick to a single javascript library when you do it though, to keep things consistent.
  • Thanks Chris for the example. How about the opposite where the scrolling/paging is inside one of the menu items of the accordion menu. For example an accordion menu with 7 menu items. Each menu item lists up to 5 links or images per 'menu/page'. And if there are more than 5 links/images/thumbnails, one could click a next button and page/scroll through the rest of the listings. All the paging/scrolling would all be done within the selected menu item of the accordion menu. I hope that makes sense. Thanks.
  • Sure, just start the opposite way. Find a "widget" of an accordian that you like and get that working. Then for the content of each accordian, find a widget for a page scroller and drop that in there. In my experience these little widgets generally play pretty nice together and you shouldn't have much trouble.