JSFiddle - React, Tailwind, and code Playground

by meo

HTML

<div>
    <h1>dini mueter</h1>
    <div class="test">
        <p>Do your layouts deserve better than Lorem Ipsum? Apply as an art director and team up with the best copywriters at Jung von Matt: www.jvm.com/jobs/lipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis dui vel lacus tempor pulvinar id sed neque. In scelerisque nibh at enim rutrum eu gravida metus suscipit. Cras viverra gravida elementum. Donec auctor odio non nisi rhoncus aliquam. Praesent vitae libero est</p>


    </div>
</div>

CSS

body > div {
    width: 200px;
}

h1 {
    background: #888;
    color: #fff;
}
div.test {
    background: red;
    padding: 15px 5px;
}

JavaScript

var fancyToggler = function( $trigger,contentSelector,speed ){
    $trigger.each(function(){
       var $wrap, $trig, height, $content;
       
       speed = speed || 300;
       $trig = $(this);
       $content = $trig.nextAll( contentSelector || "div" ).eq(0);
       height = $content.outerHeight();
       
       $wrap = $("<div class='wrap' />");
       $wrap.css({"height": 0, "overflow": "hidden"});
       $wrap = $content.wrap( $wrap ).parent();
          
       $trig.click(function(){
          if ( $wrap.is(".open") ){
              $trig.removeClass("open");
              $wrap.stop( false,true ).animate({"height": 0}, speed).removeClass("open");
          }else{
              $trig.addClass("open");
              $wrap.stop( false,true ).animate({"height": height + "px"}, speed).addClass("open");
          }
       });
       
    });
}
    
fancyToggler($("h1"));