[Résolu] Bouton read more

Salut à tous
je me suis lancé dans la création de bouton "lire plus" en JS mais comme je suis un newbie je rame un peu. c'est pour cela que j'aurais besoin de votre aide.
j'ai crée un dégradé sur une partie du texte qui doit disparaitre, et laissé voir la suite quand on clique sur le bouton "lire plus".
le problème c'est que comme j'ai plusieurs boutons. Quand je clique sur un cela supprime le dégradé sur tous.
je vous met le code vous allez mieux comprendre
le CSS et HTML

<style>
.arti {
  position: relative;
}

.arti:after {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
  content: "";
  background: linear-gradient(to top,
     rgba(255,255,255, 1) 20%,
     rgba(255,255,255, 0) 80%
  );
  pointer-events: none; /* so the text is still selectable */
}
</style>

  <div class="col">
    <div class="card shadow h-100" data-annee="A2007">
      <div class="position-absolute top-0 start-0 ms-4 mb-1"><p class="fs-10 text-white opacity-75"><b> 2007 </b></p></div>
        <img src="tccimg/annee-2007.jpg" class="card-img-top" alt="">
          <div class="card-body"><h2 class="fs-5 py-2 text-center">Lorem ipsum dolor sit amet consectetur.</h2>
            <p class="text-center py-2"><button onclick="readMore('A2007')" class="btn btn-outline-n btn-sm myBtn">+ Afficher plus</button></p>
        <article class="vide arti">
              <p>Lorem, ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis sit in odio optio repellendus, aliquam veritatis distinctio ipsa fugiat, maxime reiciendis nam, aspernatur atque temporibus iure dolor cupiditate, perferendis. Quae.</p>
            <div class="dots"></div>
            <div class="more" style="display: none;">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non officia minus nesciunt quisquam sed voluptates laborum, illum nihil dolore, consequuntur illo quod. Saepe eveniet quaerat voluptatum, distinctio tempore porro asperiores.</p>
            </div>
        </article>
          </div>
    </div>
  </div>

  <div class="col">
    <div class="card shadow h-100" data-annee="A2011">
      <div class="position-absolute top-0 start-0 ms-4 mb-1"><p class="fs-10 text-white opacity-75"><b> 2011 </b></p></div>
        <img src="tccimg/annee-2011.jpg" class="card-img-top" alt="">
          <div class="card-body"><h2 class="fs-5 py-2 text-center">Lorem ipsum dolor sit amet consectetur.</h2>
            <p class="text-center py-2"><button onclick="readMore('A2011')" class="btn btn-outline-n btn-sm myBtn">+ Afficher plus</button></p>
        <article class="vide arti">
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ea laborum aliquam repudiandae ex quis veniam officia mollitia nemo animi quaerat natus, quae nostrum velit labore saepe atque architecto at pariatur.</p>
            <div class="dots"></div>
            <div class="more" style="display: none;">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam placeat minima doloribus consequuntur ratione reiciendis, animi fugiat, et iusto perferendis. Id quaerat, recusandae eveniet eos enim, voluptas facere autem atque.</p>
            </div>
        </article>
          </div>
    </div>
  </div>

le JS

  function readMore(annee) {
    let dots = document.querySelector(`.card[data-annee="${annee}"] .dots`);
    let moreText = document.querySelector(`.card[data-annee="${annee}"] .more`);
    let btnText = document.querySelector(`.card[data-annee="${annee}"] .myBtn`);
    let article = document.querySelector(`.card[data-annee="${annee}"] .vide`);

    if (dots.style.display === "none") {
        dots.style.display = "block";
        btnText.textContent = "+ Afficher plus";
        moreText.style.display = "none";
        $( "article" ).addClass( "arti" );
    } else {
        dots.style.display = "none";
        btnText.textContent = "- Afficher moins";
        moreText.style.display = "block";
        $( "article" ).removeClass( "arti" );
    }
}

Merci d'avance de votre aide
Cdt
Modifié par spawns (08 Mar 2022 - 00:28)

Salut

https://codepen.io/JUSEN/pen/oNorBNw

ton code fonctionne tres bien

Oui mais non
si tu places les "div" l'un a coté de l'autre et pas l'un en dessous de l'autre.
Tu comprendras le problème.

Cdt

Salut,

spawns a écrit :
Oui mais non
si tu places les "div" l'un a coté de l'autre et pas l'un en dessous de l'autre.
Tu comprendras le problème.

Ce n'est pas dans ton code et on ne peut pas le deviner...

On ne peut pas non plus deviner comment tu as placé les "div" (on parle des div.col ?) l'une a coté de l'autre (flex ? inline-block ? grid ?)... merci de mettre à jour le code que tu mets a disposition avec tout les éléments. Tu peux le reproduire toi même dans un https://codepen.io/ ou un https://jsfiddle.net/ c'est encore mieux.

Bonne journée
Modifié par _laurent (09 Mar 2022 - 12:42)

ok effectivement autant pour moi,
j'avais essayé de mettre un minimum de code.
les div > card sont l'une à coté de l'autre et il y en a 4 normalement j'en met que 2.
Framework : Bootstrap 5

<section class="container-fluid py-5">
    <div class="container-fluid">
    <div class="row">
      <div  class="col-12">
        <h2 class="divider-h2 color1 pt-3 pb-5 fs-3">Lorem ipsum</h2>
<div class="row row-cols-1 row-cols-lg-4 g-4">
<style>
.arti {
  position: relative;
}

.arti:after {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 100%;
  content: "";
  background: linear-gradient(to top,
     
rgba(255,255,255, 1) 20%,
     
rgba(255,255,255, 0) 80%
  );
  pointer-events: none; /* so the text is still selectable */
}
</style>

  <div class="col">
    <div class="card shadow h-100" data-annee="A2007">
      <div class="position-absolute top-0 start-0 ms-4 mb-1"><p class="fs-10 text-white opacity-75"><b> 2007 </b></p></div>
        <img src="tccimg/annee-2007.jpg" class="card-img-top" alt="">
          <div class="card-body"><h2 class="fs-5 py-2 text-center">Lorem ipsum dolor sit amet consectetur.</h2>
            <p class="text-center py-2"><button onclick="readMore('A2007')" class="btn btn-outline-n btn-sm myBtn">+ Afficher plus</button></p>
        <article class="vide arti">
              <p>Lorem, ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis sit in odio optio repellendus, aliquam veritatis distinctio ipsa fugiat, maxime reiciendis nam, aspernatur atque temporibus iure dolor cupiditate, perferendis. Quae.</p>
            <div class="dots"></div>
            <div class="more" style="display: none;">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non officia minus nesciunt quisquam sed voluptates laborum, illum nihil dolore, consequuntur illo quod. Saepe eveniet quaerat voluptatum, distinctio tempore porro asperiores.</p>
            </div>
        </article>
          </div>
    </div>
  </div>

  <div class="col">
    <div class="card shadow h-100" data-annee="A2011">
      <div class="position-absolute top-0 start-0 ms-4 mb-1"><p class="fs-10 text-white opacity-75"><b> 2011 </b></p></div>
        <img src="tccimg/annee-2011.jpg" class="card-img-top" alt="">
          <div class="card-body"><h2 class="fs-5 py-2 text-center">Lorem ipsum dolor sit amet consectetur.</h2>
            <p class="text-center py-2"><button onclick="readMore('A2011')" class="btn btn-outline-n btn-sm myBtn">+ Afficher plus</button></p>
        <article class="vide arti">
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ea laborum aliquam repudiandae ex quis veniam officia mollitia nemo animi quaerat natus, quae nostrum velit labore saepe atque architecto at pariatur.</p>
            <div class="dots"></div>
            <div class="more" style="display: none;">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam placeat minima doloribus consequuntur ratione reiciendis, animi fugiat, et iusto perferendis. Id quaerat, recusandae eveniet eos enim, voluptas facere autem atque.</p>
            </div>
        </article>
          </div>
    </div>
  </div>
</div>
      </div>
    </div>
  </div>
</section>

pour le reste inchangé

Cdt

cela ne fonction pas avec

article.removeClass( "arti" );

c'est bon j'ai trouvé
il faut passer par

article.classList.remove("arti");

Merci de votre aide
@+

spawns a écrit :
cela ne fonction pas avec

article.removeClass( "arti" );

C'est à cause de ton querySelector qui n'a pas l'air de marcher avec removeClass, enfin du moins comme ça. Doit falloir une petite adaptation mais je vais pas passer du temps sur ça si t'as déjà réglé ton soucis autrement.

Sinon, quitte a avoir Jquery pourquoi tu n'utilise pas les $( ) plutot que les querySelector ?

let article = $(`.card[data-annee="${annee}"] .vide`);

et en plus ca marche avec :

article.removeClass( "arti" );

T'as plus besoin de Jquery du coup

Bonne journée

Exact,
mais j'utilise Déjà Jquery pour autre chose donc c'est pas grave
Merci encore pour ton aide
@+