JSFiddle - React, Tailwind, and code Playground

HTML

<section>
    <header>
        <span>Alumno</span>
        <span>Nota</span>
        <span>Entregado</span>
    </header>
      
    <div class = "fila">
        <span>Nombre del alumno:</span>
        <input type = "text" />
        <div class = "oculto">
            <h4>Comentario del alumno:</h4>
            <label>El alumno no agregó ningún comentario.</label>
        </div>
    </div>
        
    <div class = "fila">
        <span>Nombre del alumno:</span>
        <input type = "text" />
        <div class = "oculto">
            <h4>Comentario del alumno:</h4>
            <label>El alumno no agregó ningún comentario.</label>
        </div>
    </div>
      
    <div id = "control">
        <a id = "despliega">Desplegar todo</a>
        <a id = "oculta">Recoger todo</a>
    </div>
</section>

CSS

*{
    transition: color .8s ease;  
}

section{
    width: 30em;
}

header span{
    font-weight: bold;
    display: inline-block;
    margin: 0 3.5em 0 2.5em;
}

.fila span{
    color: blue;   
    cursor: pointer;
}

.oculto{
    display: none;
    background: rgba(0, 255, 0, .2);
    margin-bottom: .5em;
    border: .1em gray solid;
    color: navy;
    width: 30em;
}

.oculto h4{
    margin: 0;  
    color: darkgreen;
}

#control{
    margin-top: .5em;
}

#control a{
    display: block;
    color: red;
    cursor: pointer;
}

#control a:hover{
    color: green;
}

JavaScript

var ref = $(".oculto");

$('#despliega').click(function () {
    ref.slideDown("fast");
});
$('#oculta').click(function () {
    ref.slideUp("fast");
});
$('.fila span').click(function () {
    var refer = $(this).parent().find(".oculto");
    if (refer.css("display") == "none")
        refer.slideDown("fast");
    else
        refer.slideUp("fast");
});