readme.md

Bootstrap-Teaser

A jQuery plugin for Twitter Bootstrap which uses the first few sentances of html as a teaser and shows a "See more..." link to show all the html.

See it in action on Bl.ocks.

Gives a preview of paragraph contents and a link to see the rest of the paragraph.

Usage

Basic

• Include bootstrap-teaser.js in your page:

<script src='bootstrap-teaser.js'></script>

• Add class="teaser" to an element and the first sentence will be used as a teaser and a See more... link will be created for you.

Settings

Add data-teaser-length to the element to specify the number of sentences, eg data-teaser-length=3 will show the first three sentences as a preview.

The created See more... link has class text-info -- so it will be affected by other changes to that Bootstrap class.

bootstrap-teaser.js

$(function() {
	$('.teaser').each(function() {
		var el = $(this);
		var long_text = el.html()
		var n_sentences = el.attr("data-teaser-length") || 1;
		var short_text = el.html().split(/([\.\?\!])\s/, (n_sentences * 2) ).map(function(d, i) {return i % 2 == 0 ? d : d + " " }).join("")

		if (long_text != short_text) {
			el.html('')
			el.append(
				"<span class='teaser-long'>" +
				long_text +
				"</span>" +
				'<span class="teaser-short">' +
				short_text +
				"<span class='teaser-see-more text-info' style='cursor:pointer;margin-top:5px;display:block;' " +
				"onclick='$(this).parent().hide();$(this).parent().siblings(\".teaser-long\").show();'> See more...</span>" +
				"</span>"
				)
			el.children('.teaser-long').hide()
		}
	})

	$('.teaser-see-more')
		.mouseenter(function() {$(this).css("text-decoration", "underline")})
		.mouseleave(function() {$(this).css("text-decoration", "none")})

})