<tr> <td>Guinea-Bissau</td> <td>1151330</td> <td>36120</td> <td> <span class='show-more' onclick='showReligion(79)' id="79">Show more <i class='material-icons icon'>add</i></span> <div class='show-more-retracted'> Christian<br> Muslim<br> </div> </td> </tr>Genero html, con php, como el de arriba y quiero cambiar la clase del elemento div.show-more-retracted a show-more-expanded, cuando hago clic en "mostrar más"/el ícono "agregar".
Los Id también se generan y le doy el Id como argumento a la función showReligion() y eso funciona, ya que lo verifiqué con console.log.
lo probé con
function showReligion(id) { var element = document.getElementById(toString(id)); element.classList.toggle("show-more-expanded"); } Siempre obtuve Uncaught TypeError: Cannot read properties of null (reading 'classList')
Me di cuenta de que este código solo cambiaría la clase del elemento span donde se encuentra "Mostrar más".
¿Cómo puedo cambiar la clase de "mostrar más retraído" a "mostrar más expandido"?
.nextElementSibling para obtener el siguiente elemento y .className para obtener/establecer la clase
function showReligion(id) { var element = document.getElementById(id); element.nextElementSibling.className ="show-more-expanded"; } para alternar entre show-more-retracted y show-more-expanded
function showReligion(id) { var element = document.getElementById(id).nextElementSibling; var newClass = element.className.includes("retracted") ? "show-more-expanded" : "show-more-retracted"; element.className = newClass; }