JSFiddle - React, Tailwind, and code Playground

by robinparduez

HTML

<div class="example2">
    <p>Lorem  ipsum dolor sit amet, consectetur adipiscing elit. Fusce  facilisis  sagittis lectus. Curabitur quam arcu, adipiscing quis pretium  in,  pharetra eget dolor.</p>
</div>

CSS

.button{
   -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
   -moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 1px  1px rgba(0, 0, 0, 0.2);box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);
   background:#eee;
   border:0;
   color:#333;
   cursor:pointer;
   font-family:"Lucida Grande",Helvetica,Arial,Sans-Serif;
   margin:0;padding:6px 4px;
   text-decoration:none;
   position:relative
   }
 .example1 p, .example2 p{
   border:1px solid #eee;background:#eee;
   -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
   width:400px;
    padding:10px;
    margin:10px 0
   }

JavaScript

$(document).ready(function(){    
     $('.example2').hide().before('<a href="#" id="toggle-example2" class="button">Open/Close</a>');
     $('a#toggle-example2').click(function() {
         $('.example2').slideToggle(1000);
         return false;
     });
 });