JSFiddle - React, Tailwind, and code Playground

by rgthree

HTML

<section class="article">
    <p>before</p>
    <section class="hidden">
        <section class="fold">
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas convallis felis vulputate nibh rutrum sit amet vestibulum nulla vulputate. Donec turpis massa, iaculis quis eleifend sed, aliquam in augue. Vestibulum gravida suscipit velit, vel eleifend lorem posuere at. Nam accumsan est non sem consequat aliquam. Proin et enim ante, ut pretium arcu. Nullam non viverra velit. Etiam lobortis orci malesuada neque eleifend eleifend. Sed sit amet erat ipsum, at placerat tellus. 
            </p>
        </section>
        <section class="fold">
            <p>
            Phasellus id adipiscing odio.Sed a leo nec sem fringilla eleifend in varius libero. Nam elementum risus eu metus auctor rutrum. Curabitur eget est eget eros lacinia pretium. Suspendisse laoreet venenatis lorem, vel luctus lectus porttitor non. In condimentum venenatis blandit. In lacinia scelerisque velit luctus ultrices. In hac habitasse platea dictumst. Sed sed eleifend neque.
            </p>
        </section>
    </section>
    <a class="more-link" href="javascript: return false;">more</a>
</section>

CSS

/* Fold/Unfold animation
Now with gradients and expanding container!
*/
body {}

.more-hidden {
    border:1px solid #F00;
    /*background: rgba(0,0,0,0.5);*/
}
p {
  color: #333;
  font-family: HelveticaNeue-Light, Helvetica;
  font-size: 16px;
  font-weight: lighter;
  line-height: 20px;
}

.hidden {
    border:1px solid #00F;
}

.hidden > .fold {
    -webkit-perspective: 400px;
    -webkit-perspective-origin:50% 0% 0%;
    border:1px solid #F00;
}
.hidden > .fold + .fold {
    -webkit-perspective-origin:50% 100% 100%;
}   
.hidden > .fold > p {
    -webkit-transition:all 1.5s ease-in-out;
    -webkit-transform: rotateX(-90deg);
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin:50% 0%;
    height:auto;
    border:1px solid #F60;
}
.hidden > .fold + .fold > p {
    -webkit-transform: rotateX(90deg);
    -webkit-transform-origin:50% 100%;
}

.article.open .hidden:hover {
    /* height set in js for transition */
}

.article.open .hidden > .fold > p {
    -webkit-transform: rotateX(-10deg);
}   
.article.open .hidden > .fold + .fold > p {
    -webkit-transform: rotateX(10deg);
}

JavaScript

var l = $('.article > .more-link');

$('.article > .more-link').click(function(e){
    $(this).parent().toggleClass('open');
    var isOpen = $(this).parent().hasClass('open');
    $(this).parent().find('.hidden > .fold p').each(
        function(e){
            //$(this).height(isOpen ? this.scrollHeight : 0)
        }
    );

});