JSFiddle - React, Tailwind, and code Playground

by amkrtchyan

HTML

<div class="feedback_block">
        <a href="">look answer</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique, arcu vitae interdum mollis, magna
            leo sodales orci, eget condimentum nulla sapien quis nulla.
            Donec mauris dolor, interdum non cursus sed, iaculis sagittis leo. Pellentesque ipsum libero, lacinia
            porta cursus eu, placerat ac mi. Nulla bibendum imperdiet fringilla.
            Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque id
            aliquet est. Mauris laoreet pulvinar pharetra  leo sodales orci, eget condimentum nulla sapien quis nulla.
            Donec mauris dolor, interdum non cursus sed, iaculis sagittis leo. Pellentesque ipsum libero, lacinia
            porta cursus eu, placerat ac mi. Nulla bibendum imperdiet fringilla.
            Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque id
            aliquet est. Mauris laoreet pulvinar pharetra. </p>
    </div>
<div class="feedback_block">
        <a href="">look answer</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique, arcu vitae interdum mollis, magna
            leo sodales orci, eget condimentum nulla sapien quis nulla.
            Donec mauris dolor, interdum non cursus sed, iaculis sagittis leo. Pellentesque ipsum libero, lacinia
            porta cursus eu, placerat ac mi. Nulla bibendum imperdiet fringilla.
            Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque id
            aliquet est. Mauris laoreet pulvinar pharetra  leo sodales orci, eget condimentum nulla sapien quis nulla.
            Donec mauris dolor, interdum non cursus sed, iaculis sagittis leo. Pellentesque ipsum libero, lacinia
            porta cursus eu, placerat ac mi. Nulla bibendum imperdiet fringilla.
            Vestibulum ante ipsum primis in faucibus orci luctus...

CSS

p {
    display: none;
    width:200px;
}

JavaScript

var toggle = 0;
$(document).ready(function () {
    $(".feedback_block").each(function () {
        $("a", this).click(function (e) {
            if (toggle == 0) {
                $(this).parent().children("p").stop(true, true).fadeIn(500);
                $(this).addClass("clicked");
                $(this).children().addClass("clicked_span");
                toggle = 1;
                console.log(toggle);
            } else
            if (toggle == 1) {
                $(this).parent().children("p").stop(true, true).fadeOut(500);
                $(this).removeClass("clicked");
                $(this).children().removeClass("clicked_span");
                toggle = 0;
                console.log(toggle);

            }
            e.stopPropagation();
            return false;
        });
        toggle = 0;
    });
});