accordian menu

Posted on 2011-04-23
Last Modified: 2012-05-11
Looking at this sample accordian menu:, is it possible to add scroll bars with the panels for text that is too long?  A nice sleek, elegant scroll bar that doesn't clutter it up?  Also, I've cut the source code from this online menu and was working with it on my desktop and I can't figure out how to have the "arrow" change on open and close.  Can anyone help?

Question by:webgirl29
    LVL 18

    Expert Comment

    by:Jerry Miller
    I always use the Ajax Toolkit accordion for this style window. You would most likely need the auto size property set according to your needs.

    Author Comment

    Does Ajax need to run off of the server?  I can only use client side scripts for this project I'm working on.
    LVL 18

    Accepted Solution

    Since you can only use client side scripts, try to set the overflow:Scroll in the CSS property.

    Author Comment

    Another question, looking at the source code from the demo, do you know how I can change the bar graphic (maybe the arrow faces down and the bar color changes slightly) when the user rolls over it?  Having a hard time figuring it out.  I know it should be simple.  One graphic for when it's open, and one for when it closes.  Or maybe also a roll over effect.  See for an example of what I'd like to do.

    Featured Post

    Free Trending Threat Insights Every Day

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Join & Write a Comment

    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
    In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now