Скрытый текст jQuery

[Heidel]

Блок новостей такого вида



html-код (верстка на html5)

<article>
		<div id="news-box">
			<h2 class="title">Company News</h2>
			<div class="news">
				<div class="news-date">12/01/2004</div>
				<div style="clear: both;"></div>
				<div class="news-text short"><a href="/">Lorem ipsum dolor sit amet,</a> consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. tUt wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. tUt wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis</div>
				<div class="news-link"><a href="/">• read more</a></div>
				<div style="clear: both;"></div>
			</div>
			<div class="news">
				<p class="news-photo">
					<a href="/images/photo1.jpg" rel="lightbox" title="Изображение"><img src="/images/photo1.jpg" title="Изображение" width="169" height="112"></a>
				</p>
				<div class="news-date">12/01/2004</div>
				<div style="clear: both;"></div>
				<div class="news-text short"><a href="/">Lorem ipsum dolor sit amet,</a> consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. tUt wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. tUt wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis </div>
				<div class="news-link"><a href="/">• read more</a></div>
				<div style="clear: both;"></div>
			</div>
		</div>
	</article>

Текст новости в блоке news-text показан не полностью, для этого к нему добавлен класс short

.short {
    height: 80px;
    overflow: hidden;
}

Скрипт на jQuery -- по клику на ссылку read more класс short удаляется и текст показывается целиком, а текст в ссылке заменялся на collapse, при клике на collapse класс short снова добавляется и текст в ссылке обратно заменяется на read more

		<sсriрt>
        jQuery(document).ready(function(){
        jQuery("article #news-box .news .news-link a").toggle(function(e) {
			jQuery(this).parent().siblings("article #news-box .news .news-text").removeClass("short");
			jQuery(this).html("• collapse");
			e.preventDefault();
		}, function(e) {
			jQuery(this).parent().siblings("article #news-box .news .news-text").addClass("short");
			jQuery(this).html("• read more");
			e.preventDefault();
			})
		});
		</sсriрt>

@темы: HTML, CSS, jQuery