Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

<h1>Sample title</h1>
<div class="text-wrapper">
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis dui cursus, cursus dolor in, imperdiet lectus. Suspendisse sollicitudin turpis lobortis urna egestas euismod. Mauris iaculis nulla libero, sit amet pharetra lorem dapibus id. Suspendisse malesuada, tellus non convallis dictum, arcu dui faucibus nulla, sit amet finibus neque mi vel lacus. Praesent vehicula erat ex, vel efficitur felis pellentesque a. Curabitur sit amet nunc non libero pretium accumsan vitae ut ligula. Donec vulputate varius vestibulum. Praesent in tellus semper, porta justo vel, facilisis massa. Sed condimentum quam feugiat, mollis ipsum in, vestibulum nunc. In quam nisl, porta eget aliquet vel, tempus vel sem. Quisque at mi ut sapien tincidunt accumsan non quis ante. Suspendisse rhoncus, mi sit amet luctus tincidunt, urna dolor laoreet lacus, id feugiat elit velit quis nibh. Aliquam condimentum nisi ut nisi volutpat, nec pulvinar justo elementum. Quisque id ullamcorper magna. Suspendisse orci massa, ultrices nec eros sed, condimentum ornare diam.</p>

  <p>Aliquam faucibus, augue ac tempor rutrum, leo purus egestas ante, nec ornare justo leo eget sem. Sed dui mi, euismod nec condimentum vitae, elementum at justo. In ullamcorper orci libero, eu pharetra turpis finibus tincidunt. Cras mollis non tortor quis pretium. Integer nec elit metus. Donec iaculis maximus ex, sed tincidunt turpis vehicula vitae. Nulla imperdiet eu enim et condimentum. Quisque molestie, orci vitae laoreet efficitur, odio arcu pharetra turpis, a molestie mi dui vel dui. Donec blandit, lectus ac vehicula mattis, libero neque malesuada magna, eget volutpat sapien orci a massa. Donec at libero laoreet, elementum neque sed, pharetra augue.</p>

  <p>Proin et dignissim magna. Etiam lobortis massa non tempus porta. Integer ac lectus in dui luctus commodo nec eu nisl. Quisque sed nisi quis neque euismod efficitur. Aliquam dapibus dictum nunc sed tristique. Aenean finibus sapien id pharetra faucibus. Maecenas at leo vitae diam pulvinar tristique id dictum diam.</p>
</div>
<div class="readmore-btn">Read more</div>
              
            
!

CSS

              
                .text-wrapper p:first-child{
  display:inline;
}
.full-text{
  display:inline;
}
.readmore-btn{
  display:block;
  color:blue;
  cursor:pointer;
  margin-top:15px;
}
              
            
!

JS

              
                $(".text-wrapper").each(function() {
         var html = $(this).html().split(" ");
         html = html.slice(0,50).join(" ") + '<span class="dots">...</span><div class="full-text">' + html.slice(50).join(" ");
         $(this).html(html);
    });

    $('.full-text').hide();

    $('.readmore-btn').click(function (event) {
        event.preventDefault();
        var dots_visibility = $(this).siblings(".text-wrapper").find("span.dots");
        dots_visibility.html(dots_visibility.html() == '...' ? ' ' : '...')
        $('.text-wrapper > p.p1').contents().unwrap();
        $(this).parent().find('.full-text').slideToggle('200');
        $(this).html($(this).html() == 'Read less' ? 'Read more' : 'Read less');
    });
              
            
!
999px

Console