Databases
StackOverflow2013
Postsdbo
POTruncate paragraph first 100 character and hide rest content of paragraph to show/hide rest contenct with more/less link
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTruncate paragraph first 100 character and hide rest content of paragraph to show/hide rest contenct with more/less link
    text
    copied!<p>I have paragraph which has more than 500 character. I want to get only initial 100 character and hide rest of it. Also I want to insert "More" link next to 100 character. On click of more link whole paragraph should display and edit text "More" to "Less" and on click "Less" it should toggle behavior. Paragraph is dynamically generated I cant wrap content of it using .wrap(). Here is example what I have and what I want.</p> <p>This is what I have :</p> <pre><code> &lt;p&gt;It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text.&lt;/p&gt; </code></pre> <p>This is what I want when DOM loads </p> <pre><code> &lt;p&gt;It is a long established fact that a reader will be distracted by ..More&lt;/p&gt; </code></pre> <p>This is what I want when user click "More"</p> <pre><code> &lt;p&gt;It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. ..Less&lt;/p&gt; </code></pre> <p>When we click on "Less", it should revert what on click "More" has done.</p> <p>I am using jQuery to split, slice and wrap substring into span which I want to hide but that doesn't work.</p> <pre><code>var title = $("p").text(); var shortText = jQuery.trim(title).substring(100, 1000).split(" ") .slice(0, -1).join(" ") + "...More &gt;&gt;"; shortText.wrap('&lt;/span&gt;'); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload