Jquery Accordion - скрыть и показать текст в элементе заголовка

У меня есть аккордеон JQuery, где есть вероятность, что текст в разделе заголовка может быть очень длинным.

<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>​

пример скрипки:

http://jsfiddle.net/865M9/

Есть ли способ, с помощью которого я могу отображать только первые 20 символов заголовка, когда аккордеон закрыт, а затем расширять текст для отображения полной строки, когда элемент аккордеона активен (расширен)?


html jquery css jquery-ui jquery-ui-accordion
person Community    schedule 06.11.2012    source источник
comment
Вы знаете, в jsFiddle есть панель для загрузки самых популярных скриптов, а также возможность выбрать, когда запускать плагин, onload, domready...   -  person elclanrs    schedule 06.11.2012
comment
@elclanrs - Спасибо за совет. Я не знал об этих функциях и рассмотрю их в следующий раз, когда буду создавать скрипку :)   -  person    schedule 06.11.2012

Ответы (1)


arrow_upward
8
arrow_downward

Вы можете ограничить заголовки одной строкой с помощью CSS.

Например:

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

http://jsfiddle.net/jmKu4/

person JasonWoof    schedule 06.11.2012
comment
Великолепно! Я рассматривал возможность использования двух отдельных элементов ‹span› и их отображения/скрытия на основе активного заголовка .ui-accordion-header, но ваше решение элегантно, и я надеялся, что оно будет возможным. Большое спасибо за это! - person ; 06.11.2012
comment
Что именно это делает? переполнение текста: многоточие; - person VIDesignz; 06.11.2012
comment
@ViDesignz - Проверьте скрипку. Вы можете видеть, что длинная строка усекается с помощью ... в конце. ... связано с переполнением текста: многоточие - person ; 06.11.2012
comment
@ user1: хороший вопрос, мне было интересно узнать, как это сделать с помощью CSS. - person JasonWoof; 06.11.2012
comment
@VIDesignz: пробел: nowrap говорит оставить весь текст в этом поле на одной строке (даже если он не помещается... вместо переноса на несколько строк), затем overflow: hidden говорит, чтобы скрыть часть, которая сейчас торчит из правого конца поля, а text-overflow: многоточие просто делает его крутым, добавляя многоточие, если текст становится транковым. - person JasonWoof; 06.11.2012
comment
@JasonWoof и пользователь Спасибо, ребята, большое спасибо! - person VIDesignz; 06.11.2012