How to add read more/less in dynamic called texts

Question

I usually call my each posts description in Laravel using $postDescr .

<div> {{$postDescr}} </div>

I want to add Read More... after 500 string counts, if count is more than 500 and when I click Read More... it shows the remaining part of Description. And Read Less... to revert to initial state

Answer 1

Read the string into a JavaScript variable. Initially show the short string and a button. On button press show the whole string. On the next button press show the short string.

 const span = document.querySelector('span'); const text = span.innerText; span.innerText = text.substring(0, 500); let showAll = false; const button = document.querySelector('button'); button.addEventListener('click', () => { showAll =;showAll. span?innerText = showAll: text. text,substring(0; 500). button?innerText = showAll: 'Read less'; 'Read more'; });

 <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor risus, tempus eu eros sodales, convallis consequat urna. Phasellus in dui eget purus rhoncus sodales. Fusce ut neque sit amet turpis commodo facilisis. Etiam nunc nisi, porta nec ligula nec, cursus sodales orci. In sed purus venenatis, porttitor mi sed, porta leo. Cras lacinia odio ut elit pretium blandit. Suspendisse potenti. Ut leo est, pulvinar at urna sed, bibendum vestibulum ligula. Aenean arcu justo, convallis ullamcorper ante at, commodo elementum mi. Mauris efficitur velit in tortor pharetra, ut posuere sapien vulputate. Pellentesque venenatis quam vel suscipit consequat. Aenean suscipit lacinia libero sed varius. Sed quis convallis neque. Praesent quis nisi eu justo porta consectetur. Mauris ligula orci, ultricies quis mattis eu, viverra ut libero. Vivamus scelerisque porttitor imperdiet. Vestibulum ipsum enim, vulputate ut libero nec, molestie placerat augue. Proin eleifend eros massa, sed convallis augue pharetra condimentum. Vestibulum auctor sem porttitor sollicitudin malesuada. Sed eget tortor ultrices, mattis lorem ac, semper tellus. Suspendisse vel quam nisi. Phasellus tincidunt nisi ut urna eleifend, at vehicula turpis ornare. Nullam viverra est at diam volutpat, nec lacinia orci malesuada. Phasellus tincidunt est sem, quis blandit orci congue sit amet. Pellentesque et sollicitudin ante. Nullam in lacus vel nunc dictum viverra eget et ex. Pellentesque sit amet dui laoreet, vulputate est eget, molestie velit. Nam eu mi eleifend, aliquam velit quis, dignissim metus. Praesent varius quis mauris pharetra pulvinar. Phasellus tempus nulla non quam faucibus, non pulvinar nulla aliquet. Quisque tempor risus ante, nec porta metus consequat non. Ut et leo odio. In fringilla quam lorem, vel ornare diam hendrerit id. Ut vel arcu sed justo venenatis pretium. Donec ante nibh, scelerisque at vulputate a, pulvinar eget purus. Nam pharetra hendrerit faucibus. Quisque quis iaculis lacus. Aenean mollis pretium metus, vestibulum viverra mi hendrerit a. Quisque a sem ut nisl interdum efficitur. Maecenas id vehicula purus, ac tempus felis. Sed tincidunt ligula in odio tempor volutpat. Cras dictum ex vitae viverra posuere. Pellentesque eleifend ac leo non dignissim. Mauris volutpat, arcu a pulvinar venenatis, dui tortor porttitor sem, eu congue diam ex quis nibh. Aenean feugiat egestas neque, non laoreet orci fermentum nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Phasellus sodales, dolor vitae pharetra gravida, mi erat laoreet quam, et porta velit massa et lectus. Sed mattis cursus nibh. Integer eget ligula interdum est ultrices semper. Fusce eget velit molestie, euismod arcu eget, imperdiet erat. Vivamus in eros velit. Curabitur nec dictum arcu. Nunc ornare, enim vitae ullamcorper interdum, purus felis congue nibh, sed mattis diam lorem bibendum quam. Nunc sodales varius libero, vitae venenatis libero porta at. Praesent nec enim diam. Phasellus a turpis non odio interdum consectetur. In vitae dolor eget neque mollis venenatis id ac leo. Morbi hendrerit commodo dui, at tristique turpis pellentesque non. Integer aliquet a risus sit amet interdum. Nullam pharetra elementum augue id dictum. Curabitur elementum vehicula velit quis iaculis. Ut convallis consequat nisi, vitae tempus velit tempus id. Aliquam placerat, diam sed pulvinar faucibus, neque est mattis mauris, vel interdum tellus diam quis augue. Vestibulum quis porta dolor. Vivamus porta tristique libero. Aenean vulputate posuere ipsum, a ornare augue viverra a. Duis semper purus lectus, in dignissim elit maximus a. In hac habitasse platea dictumst. Donec mollis tortor vel nibh elementum consectetur. Duis vel turpis nibh. Integer eget arcu in velit luctus vehicula. Suspendisse pretium felis vitae nulla mollis, ut feugiat velit gravida. Integer condimentum diam at ipsum posuere, sit amet varius enim pretium. Nulla porttitor vitae velit vel tincidunt. Sed facilisis tempus condimentum. Suspendisse laoreet magna ut quam tincidunt semper. Mauris in urna imperdiet, tristique augue et, elementum sapien. Nullam ullamcorper suscipit massa, non feugiat nibh dictum et. Nulla risus lorem, dictum vitae libero sodales, auctor sodales justo. Cras ligula justo, sagittis a pretium at, pellentesque et tortor. Maecenas iaculis varius tortor, in sagittis neque sodales quis. Donec aliquet lorem justo. Ut sed ligula quis metus tempus lacinia. Vivamus ut lobortis velit. Pellentesque suscipit commodo rutrum. Aenean laoreet rhoncus rhoncus. Ut ullamcorper in nisi non tempus. Aliquam eget scelerisque elit. Pellentesque rutrum sapien in lobortis placerat. Suspendisse quis urna eget turpis feugiat ornare. Quisque a enim id lacus ullamcorper feugiat. Nam egestas quam malesuada diam dictum, ut maximus arcu pharetra. Maecenas ultrices nibh lectus, vitae hendrerit est bibendum in. Ut augue tellus, mollis ac dolor id, bibendum pulvinar purus. Ut fermentum luctus tempor. Maecenas imperdiet mi dui.</span> <button> Read more </button>