readMore.js

A smooth, responsive jQuery plugin for collapsing and expanding long blocks of text with "Read more" and "Read Less" links.

Demo 1 - Basic

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex ea facere saepe, hic quod sunt molestias, corrupti veritatis. Accusantium modi molestiae ab commodi error. Maiores ab quo recusandae reprehenderit impedit minus non, libero cumque, dignissimos officia illo neque quia! Placeat et labore quam, vero atque minus. Quas fuga nobis, soluta officiis temporibus similique sapiente quaerat magni repudiandae.

Accusamus quaerat autem consectetur atque fugiat fuga quisquam, officia deserunt? Facilis et voluptatem numquam quia ratione, deserunt totam incidunt beatae aspernatur autem ipsum voluptatibus, architecto molestias nesciunt consectetur voluptates iste perspiciatis aliquam ipsam, dicta eveniet nulla quasi. Id, cumque. Deserunt quisquam, blanditiis at dolor, excepturi aspernatur qui praesentium. Neque asperiores magnam quod

Heading 2

voluptatem ab id facere vero officia, illo inventore similique. Dolorum porro impedit repellat natus distinctio optio vel, repudiandae nemo laborum neque cum illum explicabo saepe quis aspernatur deleniti, dolore quisquam cupiditate ad dolores! Dolores, quidem, dolore. Nesciunt, sapiente enim quis, unde fuga voluptas reiciendis deserunt eum quisquam odit veritatis tenetur iste veniam alias itaque beatae. Consectetur necessitatibus cupiditate cumque, iste dolores expedita assumenda quibusdam harum ipsa, labore, repellendus, non veritatis ab. Commodi, illo, similique nam, enim modi aut dignissimos necessitatibus nobis totam et dolores tenetur nisi, culpa inventore? Fugit, quam, porro!

How to Use

<script src="readMore.js" ></script>
<script>
    $(".article").readMore();
</script>

Demo 2 - Basic With Some Exclusion

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex ea facere saepe, hic quod sunt molestias, corrupti veritatis. Accusantium modi molestiae ab commodi error. Maiores ab quo recusandae reprehenderit impedit minus non, libero cumque, dignissimos officia illo neque quia! Placeat et labore quam, vero atque minus. Quas fuga nobis, soluta officiis temporibus similique sapiente quaerat magni repudiandae.

Accusamus quaerat autem consectetur atque fugiat fuga quisquam, officia deserunt? Facilis et voluptatem numquam quia ratione, deserunt totam incidunt beatae aspernatur autem ipsum voluptatibus, architecto molestias nesciunt consectetur voluptates iste perspiciatis aliquam ipsam, dicta eveniet nulla quasi. Id, cumque. Deserunt quisquam, blanditiis at dolor, excepturi aspernatur qui praesentium. Neque asperiores magnam quod

Heading 2

voluptatem ab id facere vero officia, illo inventore similique. Dolorum porro impedit repellat natus distinctio optio vel, repudiandae nemo laborum neque cum illum explicabo saepe quis aspernatur deleniti, dolore quisquam cupiditate ad dolores! Dolores, quidem, dolore. Nesciunt, sapiente enim quis, unde fuga voluptas reiciendis deserunt eum quisquam odit veritatis tenetur iste veniam alias itaque beatae. Consectetur necessitatibus cupiditate cumque, iste dolores expedita assumenda quibusdam harum ipsa, labore, repellendus, non veritatis ab. Commodi, illo, similique nam, enim modi aut dignissimos necessitatibus nobis totam et dolores tenetur nisi, culpa inventore? Fugit, quam, porro!

Listing

Heading 3

voluptatem ab id facere vero officia, illo inventore similique. Dolorum porro impedit repellat natus distinctio optio vel, repudiandae nemo laborum neque cum illum explicabo saepe quis aspernatur deleniti, dolore quisquam cupiditate ad dolores! Dolores, quidem, dolore. Nesciunt, sapiente enim quis, unde fuga voluptas reiciendis deserunt eum quisquam odit veritatis tenetur iste veniam alias itaque beatae. Consectetur necessitatibus cupiditate cumque, iste dolores expedita assumenda quibusdam harum ipsa, labore, repellendus, non veritatis ab. Commodi, illo, similique nam, enim modi aut dignissimos necessitatibus nobis totam et dolores tenetur nisi, culpa inventore? Fugit, quam, porro!

How to Use

<script src="readMore.js" ></script>
<script>
    $(".article_ex").readMore({ excludeTag : "ul,li,h3"});
</script>

Demo 3 - With List

Listing

  • List 1
  • List 2
  • List 3
  • List 4
  • List 5
  • List 6
  • List 7

Listing

  1. Ordered List
  2. Ordered List
  3. Ordered List
  4. Ordered List
  5. Ordered List
  6. Ordered List
  7. Ordered List

How to Use

<script src="readMore.js" ></script>
<script>
    $(".ul-list").readMore({ childTag : "li" , minVisible: 5});
</script>