JSFiddle - React, Tailwind, and code Playground

by boushley

HTML

<p>
    <a href="" id="goslidedown">DOWN</a>
    |
    <a href="" id="goslideup">UP</a>
    <p id="slidingblock">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pellentesque sodales lacus eu auctor. Quisque accumsan scelerisque dui sit amet mollis. Curabitur feugiat lacus sed purus suscipit porttitor. Phasellus ultricies dignissim auctor. Ut quis mi justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum nunc blandit neque feugiat euismod facilisis sapien mattis. Proin est nunc, consequat vel porttitor dictum, fringilla et lectus. Mauris consectetur malesuada augue non elementum. Aenean luctus quam a justo luctus vestibulum. Sed facilisis mi sed dui venenatis vel vehicula nisl varius. Vivamus tempus tellus in ipsum gravida vehicula. Sed pretium, risus eget ultricies commodo, sem ipsum cursus sapien, quis hendrerit justo nunc nec nunc. Cras imperdiet, massa ut auctor viverra, eros augue feugiat erat, id egestas ligula nunc sed nibh. Ut condimentum porta libero ut interdum. Phasellus ultrices pulvinar lorem ut consectetur. Nunc porta pulvinar mi ut iaculis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pellentesque sodales lacus eu auctor. Quisque accumsan scelerisque dui sit amet mollis. Curabitur feugiat lacus sed purus suscipit porttitor. Phasellus ultricies dignissim auctor. Ut quis mi justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum nunc blandit neque feugiat euismod facilisis sapien mattis. Proin est nunc, consequat vel porttitor dictum, fringilla et lectus. Mauris consectetur malesuada augue non elementum. Aenean luctus quam a justo luctus vestibulum. Sed facilisis mi sed dui venenatis vel vehicula nisl varius. Vivamus tempus tellus in ipsum gravida vehicula. Sed pretium, risus eget ultricies commodo, sem ipsum cursus sapien, quis hendrerit justo nunc nec nunc. Cras imperdiet, massa ut auctor viverra, eros augue feugiat erat, id egestas ligula nunc sed nibh. Ut...

CSS

p {
    margin: 1em 0;
}

JavaScript

$("#goslidedown").click(function(event) {

$("#slidingblock").slideDown("slow"); event.preventDefault();

});

$("#goslideup").click(function(event) {

$("#slidingblock").slideUp("slow"); event.preventDefault();

});