Сворачивание динного текста

[Facebook]

Доброго времени суток.

Для улучшения юзабилити есть необходимость скрыть часть длинного текста для страницы категории товаров за который отвечает блок с классом .category-info. Т.е. при загрузке страницы должна выводиться высота этого блока 150 пикселей к примеру а внизу ссылка "подробнее" при клике на которую высота блока становиться авто, т.е. разворачивается, так же можно свернуть. Можно использовать конечно Show / Hide, но тогда уберется весь блок, мне нужно чтобы часть текста была всё же видна. У кого есть какие предложения, поскольку это важный момент в юзабилити совместно с продвижением. Пример можно посмотреть тут http://demo.madebyraygun.com/easy-show-hide/

[sv2109]

Вас что на гугле забанили :)

http://papermashup.com/truncate-text-with-the-jtruncate-jquery-plugin/

или

http://viralpatel.net/blogs/dynamically-shortened-text-show-more-link-jquery/

или

https://www.google.com.ua/search?q=jquery+shorten+text

[Facebook]

shorten text не удалось применить, поскольку имеются в тексте заголовки и подзаголовки видимо , урезает только до первого абзаца, остальное выводит так же, т.е. виден полный текст, кроме первого абзаца. Дубмаю тут для текста не подойдет, нужно скорее на блок вывода ориентироваться .category-info изменение его размера, в принципе я с самого начала на это и расчитывал а не для текста, потому как там в тексте так же есть атрибут дисплей нон, а мне он не нужен в целях индексации страниц это не очень правильно. Вот если блок меньше текста то это уже другое ...

[xttp]

Я бы так сделал :

.category-info {
   height: 150px;
overflow: hidden;
}

.category-info:hover {
   height: auto !important;
overflow: auto !important;
}

По простому :)