Uncaught TypeError: Cannot read property 'classList' of null

dev'otion
Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code en javascript. J'ai suivi ce tuto somme tout à fait simple à suivre pour quelque chose d'assez simple à réaliser (normalement) : https://www.youtube.com/watch?v=kQW-MXriUIU&t=417s&ab_channel=CodewithAniaKub%C3%B3w%23JavaScriptGames

Ce que j'ai fait

J'ai bien évidemment adapté le HTML proposé dans le tuto par rapport au résultat visuel que je souhaitais obtenir mais j'ai veillé à bien garder les bons attributs de class et d'id pour mes différents éléments.

Par contre, j'ai vraiment utilisé le même code en JS pour m'assurer que tout soit conforme au tuto.

Voici la partie du HTML qui nous intéresse :

<div class="item">
          <a href="contact.html">
            <img src="img/services/service-5.jpg" alt="service" />
          </a>
          <div class="expandMoreContent" id="showMoreContent5">
            <p>
              Lorem ipsum dolor sit amet consectetur,
              adipisicing elit. Enim, suscipit. Eos tempora dolorem commodi
              consectetur consequatur repellat nam, sunt repudiandae maiores
              modi velit, in possimus nesciunt quas, dicta ullam ex.
            </p>
          </div>
          <div class="expandMoreHolder">
            <span
              expand-more
              data-hidetext="Moins..."
              data-showtext="...En savoir plus"
              data-target="ShowMoreContent5"
              class="btn-expand-more"
              >...En savoir plus</span
            >
          </div>
          <a href="contact.html" class="btn-light">
            <i class="fas fa-clipboard"></i> Demander un devis
          </a>
        </div>```

Et voici mon javascript pour l'effet recherché :

// Show and hide more or less text services

document.addEventListener('DOMContentLoaded', () => {
const expandsMore = document.querySelectorAll('[expand-more]')

function expand() {
const showContent = document.getElementById(this.dataset.target)
  if(showContent.classList.contains('expand-more')) {  // Apparemment l'erreur se trouve sur cette ligne, mais je n'arrive pas à comprendre...
    this.innerHTML=this.dataset.showText
}else {
  this.innerHTML=this.dataset.hideText

}
showContent.classList.toggle('expand-active')
}
expandsMore.forEach(expandMore => {
  expandMore.addEventListener('click', expand)
})

})

Ce que je veux

Mon but, donc, est de créer un text toggle sur des div de services de mon site internet.

Ce que j'obtiens

Le soucis, c'est que je n'obtiens aucun résultat à part cette erreur dans ma console : Uncaught TypeError: Cannot read property 'classList' of null
at HTMLSpanElement.expand. Je pense que quelque chose coince et empêche d'ajouter la class "expand-active" à mes éléments HTML à la ligne que j'ai indiqué en commentaire dans JS, mais pas moyen de comprendre ce que c'est exactement. J'ai pourtant utlisé le même code du tuto cité au début. Et, c'est un tuto très récent, donc la piste de l'obsoléscence est écartée :)

Je vous remercie d'avant pour toute piste que vous pourriez m'apporter !

Aucune réponse