JSFiddle - React, Tailwind, and code Playground

HTML

<table class="tg">
    <tbody>
        <tr>
            <th class="tg-th8a">Alumno</th>
            <th class="tg-th8a">Nota</th>
            <th class="tg-th8a" style="width: 90px;">Entregado</th>
        </tr>
        <tr>
            <td class="tg-2c7p" style="text-align: left;">        <div class="nombre_alumno">Nombre del alumno</div>
            </td>
            <td class="tg-2c7p" style="text-align: left;">
                <input class="nota_trabajo" autocomplete="off" maxlength="4" name="notas[]" value="NP" type="text" />
            </td>
            <td class="tg-2c7p"></td>
        </tr>
        <tr class="ocultable oculto">
            <td class="tg-2c7p" colspan="3" style="text-align: left;">
                <div class="alumno_respuesta">Comentario del alumno:
                    <br />El alumno no agregó ningún comentario.
                        <br />
                </div>
            </td>
        </tr>
        <tr>
            <td class="tg-s6z2" style="text-align: left;">
                <div class="nombre_alumno">Nombre del alumno</div>
            </td>
            <td class="tg-s6z2" style="text-align: left;">
                <input class="nota_trabajo" autocomplete="off" maxlength="4" name="notas[]" value="9" type="text" />
            </td>
            <td class="tg-s6z2"></td>
        </tr>
        <tr class="ocultable oculto">
            <td class="tg-s6z2" colspan="3" style="text-align: left;">
                <div class="alumno_respuesta">Comentario del alumno:
                    <br />El alumno no agregó ningún comentario.
                    <br />
                </div>
            </td>
        </tr>
    </tbody>
</table>
<br/>
<a href="#" class="desplegar">Desplegar todo</a>

<br/>
<a href="#" class="recoger">Recoger todo</a>

CSS

.nombre_alumno {
	    cursor: pointer;
	    color: blue;
	}
	.alumno_respuesta {
	    border: 1px solid black;
    }
    
.oculto{
    display: none;
}

JavaScript

var ref = $(".ocultable");

$('.desplegar').click(function () {
    ref.show();
});
$('.recoger').click(function () {
    ref.hide();
});
$('.nombre_alumno').click(function () {
    var refer = $(this).parents("tr").next();
    if (refer.hasClass("oculto"))
        refer.show()
    else
        refer.hide()
});