The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Accordion menu with scrolling/paging

  • # April 29, 2008 at 9:15 am

    Does anyone know how to add scrolling or paging within an accordion menu?
    Something similar to the right hand menu at Yahoo! Auto (
    but within one of the sub menus so that someone could click through a bunch of
    images in a particular category/menu item. Thanks.

    # April 29, 2008 at 11:58 am

    This reply has been reported for inappropriate content.

    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:

    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.

    # April 29, 2008 at 6:20 pm

    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.

    # April 29, 2008 at 7:03 pm

    This reply has been reported for inappropriate content.

    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.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed