Submit your widget

A JQuery plugin that hides paragraphs

Created 5 years ago   Views 8947   downloads 2187    Author manuca
A JQuery plugin that hides paragraphs
View DemoDownload
80
Share |

A very simple JQuery plugin that hides paragraphs that you don't want visible at first glance. It is very useful for example when you only want to show the first n paragraphs of a long text. The plugin automatically adds buttons at the end of the truncated paragraphs to toggle the concealed text visibility.

Installation

  • Include hide_paragraphs.js in your HTML headers after JQuery.
  • You are done

Usage

$("container selector").hideParagraphs();

by default it show just the first paragraph.

or passing an options object (see options below):

$("container selector").hideParagraphs(options);

Assumptions

  • The plugin assumes there exists a container that contains several paragraphs as chlildren, please look attest.html for an example.
  • The truncation occurs currently only at paragraph borders please take a look at jTruncate if you need to truncate at the paragraph level (show just n characters of a paragraph).

Default options

The show key is the number of paragraph you need to be visible. The rest is self explanatory.

{show: 1, show_text: "Show more", hide_text: "Hide"}

For example to show 3 paragraphs:

$("container selector").hideParagraphs({show: 3});

Link customization

The links added to the HTML contain a class of .hp-links so you can use this to customize CSS for them.