Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Jquery Accordion - Hide and show text in title element

Jquery Accordion - Hide and show text in title element

Problem

I have a JQuery Accordion where there is a possibility that text in the title section can be very long.

Title 1

Content 1

Title 2 is really really long. Ideally, only a part of title 2 will be displayed here and the remaining text should be displayed when the accordion is expanded

Content 2

Title 3

Content 3

Title 4

Content 4

example fiddle:

http://jsfiddle.net/865M9/

Is there a way by which I can display only the first 20 characters of the title when the accordion is closed and then expand the text to display the complete string when the accordion element is active (expanded)?

Problem courtesy of: user1625066

Solution

You can restrict headlines to one line with CSS.

For example:

.ui-accordion-header.ui-state-default a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

http://jsfiddle.net/jmKu4/

Solution courtesy of: JasonWoof

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Jquery Accordion - Hide and show text in title element

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×