Question

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

<div id="accordion">
    <h3><a href="#">Title 1</a></h3>
    <div>
        Content 1
    </div>
    <h3><a href="#">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</a></h3>
    <div>
        Content 2
    </div>
    <h3><a href="#">Title 3</a></h3>
    <div>
        Content 3
    </div>
    <h3><a href="#">Title 4</a></h3>
    <div>
        Content 4
    </div>
</div>​

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)?

Answer 1

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/