JSFiddle - React, Tailwind, and code Playground

code reviews: rendering collapsible buttons (using readmore library)

by jonchius

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Readmore.js/2.2.0/readmore.min.js"></script>
<main class="container">

    <article class="stayopen">

        <h1>Chapter 1</h1>

        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam omnis, illo placeat libero error voluptatem dolor facilis dignissimos, similique maiores laudantium. Facilis deleniti aspernatur ullam quasi voluptatum, atque excepturi iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem odio provident voluptas sed ab autem ratione expedita illum atque numquam cupiditate dolor suscipit voluptatibus quibusdam tempora, facilis corporis vero fugit! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas dignissimos deserunt maxime doloremque voluptatibus nam expedita maiores molestiae neque, ab perferendis eveniet incidunt, nemo soluta nostrum est, labore distinctio ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo iusto facilis nisi eum, magnam asperiores voluptas. Sint nemo dolor, eligendi non, quibusdam enim dicta in veritatis aliquam dolore, illo, ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium veniam, deserunt ad quod. Velit libero voluptatum officia ratione laudantium maxime explicabo nulla! Tenetur molestiae, consequuntur nam at esse harum fugit! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam unde illo doloribus, ullam optio ea recusandae laboriosam, id ratione enim possimus velit veniam reprehenderit quas. Architecto saepe perferendis repudiandae eveniet.
        </p>

    </article>

    <article>

        <h1>Chapter 2</h1>

        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit veritatis cupiditate error neque amet minima...

CSS

main {
    margin: 20px 0 100px 0; 
}

JavaScript

$("article").readmore({

    speed: 2000,
    moreLink: '<button class="btn btn-success" href="#">moar</button>',
    lessLink: '<button class="btn btn-danger" href="#">tldr</button>',
    collapsedHeight: 90,
    heightMargin: 20, 
    blockCSS: 'display: block; margin: 16px 0', 
    startOpen: false
    
});