Select Multiple Paragraphs With jQuery - multiSelPar.js

multiSelPar.js is a tiny and creative jQuery plugin which enables the user to select multiple paragraphs similar to the multiple select list.

Hold down the CTRL button (Windows) and Command Button (Mac) to select multiple paragraphs within your document.

How to use it:

1. Import jQuery JavaScript library and the minified version of the jQuery multiSelPar.js into the document.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="js/jquery.multiselpar.js"></script>

2. Call the function on the top container that contains several paragraphs as these:

<div id="demo">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
  <p>
    Sed in elit nulla. Cras vel cursus magna. Proin convallis ligula ac consequat ullamcorper.
  </p>
  <p>
    Nunc at dictum turpis. Proin neque risus, faucibus sed consequat a, pharetra vel odio.
  </p>
  <p>
    Aliquam dictum est eu imperdiet pulvinar. Quisque neque orci, viverra ut nulla at, luctus viverra ipsum.
  </p>
  <p>
    Donec molestie eleifend est, id sagittis massa bibendum commodo.
  </p>
</div>

3. Import jQuery JavaScript library and the minified version of the jQuery multiSelPar.js into the document.

$(function(){

  $("#demo").pselect();

});

4. The JavaScript to get the selected paragraphs.

$("#demo").pselect("selected");

5. To output the selected paragraphs as text.

$("#demo").pselect("selected").text()

6. Style the paragraphs when the text is hovered and selected.

#demo.alt {
  /* your styles here */
}

#demo.selected {
  /* your styles here */
}

---

This awesome jQuery plugin is developed by nhonx. For more Advanced Usages, please check the demo page or visit the official website.