JSFiddle - React, Tailwind, and code Playground

by DandyCC

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="alumno_wrapper">
                    <div class="nombre_alumno">Nombre del alumno</div>
                </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 style="display: none;" 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="alumno_wrapper">
                    <div class="nombre_alumno">Nombre del alumno</div>
                </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 style="display: none;" 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;
	}

JavaScript

var ref = $(".ocultable");

$('.desplegar').click(function () {
    if (ref.hasClass("oculto")) {
        ref.removeClass("oculto");
        ref.find(".alumno_respuesta").slideDown("fast");
    }
});
$('.recoger').click(function () {
    if (!ref.hasClass("oculto")) {
        ref.find(".alumno_respuesta").slideUp("fast", function () {
            ref.addClass("oculto");
        });
    }
});
$('.nombre_alumno').click(function () {
    var ref = $(this).parents("tr").next();
    if (ref.hasClass("oculto")) {
        ref.removeClass("oculto");
        ref.find(".alumno_respuesta").slideDown("fast");
    } else {
        ref.find(".alumno_respuesta").slideUp("fast", function () {
            ref.addClass("oculto");
        });
    }
});