Estoy haciendo una tabla que muestra lo que hay en la base de datos, tengo que 2 mediumtext que al visualizarse adentro de la tabla, se agranda muchísimo, necesito saber como con js/ajax y css podría hacer esta ventana y que muestre el contenido completo este es mi codigo:
<?php
include('con_db.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/mostrarDatos.css">
</head>
<body>
<table>
<thead>
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Texto1</th>
<th>Texto2</th>
<th>Fecha</th>
</tr>
</thead>
<tbody>
<?php
$verSql = "SELECT * from usuarios";
$result = mysqli_query($conexion, $verSql);
?>
<?php
while ($verDatos = mysqli_fetch_array($result)) {
?>
<tr class="tabla">
<td><strong><?php echo $verDatos['id'];?></strong></td>
<td><?php echo $verDatos['nombre']; ?></td>
<td class="flex1"><?php echo $verDatos['texto1']; ?></td>
<td class="flex2"><?php echo $verDatos['texto2']; ?></td>
<td><?php echo $verDatos['fecha']; ?></td>
</tr>
<div class="muestraTexto1">
<p><?php echo $verDatos['texto1'];?></p>
</div>
<div class="muestraTexto2">
<p><?php echo $verDatos['texto2'];?></p>
</div>
<?php } ?>
</tbody>
</table>
<script src="js/mostrarDatos.js"></script>
</body>
</html>
// js //
let texto1 = document.querySelector('.flex1');
texto1.addEventListener('click', ()=>{
document.querySelector('.muestraTexto1').style.display = 'block';
});
let texto2 = document.querySelector('.flex2');
texto2.addEventListener('click', ()=>{
document.querySelector('.muestraTexto2').style.display = 'block';
});
// CSS
.muestraTexto1{
display: none;
max-width: 400px;
height: 300px;
background: green;
}
.muestraTexto2{
display: none;
max-width: 400px;
height: 300px;
background: green;
}
Me abre los solo los textos de el primer dato o sea ID: 1 , no se como trasmitirlo a los otros elementos que se generan con el bucle de en php, busque un montón y no encuentro esto, tendría que usar si o si Ajax? perdón por mi ignorancia