JSFiddle - React, Tailwind, and code Playground

by Alexis López Espinoza

HTML

<section>
    <button class="activar">Comentar</button>
    <section class="comentario">
        <form>
            <textarea></textarea>
            <input type="submit" />
        </form>
    </section>
</section>

<section>
    <button class="activar">Comentar</button>
    <section class="comentario">
        <form>
            <textarea></textarea>
            <input type="submit" />
        </form>
    </section>
</section>

<section>
    <button class="activar">Comentar</button>
    <section class="comentario">
        <form>
            <textarea></textarea>
            <input type="submit" />
        </form>
    </section>
</section>

<section>
    <button class="activar">Comentar</button>
    <section class="comentario">
        <form>
            <textarea></textarea>
            <input type="submit" />
        </form>
    </section>
</section>

<section>
    <button class="activar">Comentar</button>
    <section class="comentario">
        <form>
            <textarea></textarea>
            <input type="submit" />
        </form>
    </section>
</section>

CSS

section:not(.comentario){
    width: 250px;
    background: lightsteelblue;
    padding: 1.5%;
    margin-bottom: 1.5%;
}

.comentario{
    display: none;
}

JavaScript

$(document).on("click", ".activar", function(){
	$(this).parent().find(".comentario").toggle("slow");
});