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

$('.desplegar').click(function() {
		var ref = $(".ocultable");
		if (ref.hasClass("oculto")) {
			ref.removeClass("oculto");
			ref.find(".alumno_respuesta").slideDown("fast");
		}
	});
	$('.recoger').click(function() {
		var ref = $(".ocultable");
		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");
			});
		}
	});