Bouton "Lire plus"

Version imprimable

Bouton "Lire plus"

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

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<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; 
}
</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

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

Bonjour,

C'est normal, parce que le sélecteur $("article") sélectionnes toutes les articles.

Il va falloir préciser encore plus avec le mot clé this et quelques méthodes de jQuery (permettant l'animation), puis supprimer l'attribut onclick des boutons et la fonction readMore(), et utiliser la syntaxe de jQuery pour attacher l'événement click :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$(document).ready(function() {
  $('.col').on('click', '.card .myBtn', function() {
    const arti = $(this).parent().siblings('.vide'),
      dots = arti.find('.dots');
    if (dots.is(':hidden'))
      dots.show("slow").siblings('.more').hide("slow").parent('.vide').addClass('arti')
      .siblings('.py-2').find(".myBtn").text('+ Afficher plus');
    else
      dots.hide('slow').siblings('.more').show("slow").parent(".vide").removeClass('arti')
      .siblings('.py-2').find('.myBtn').text('- Afficher moins');
  });
});

Ou bien avec slideToggle :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
$('.col').on('click', '.card .myBtn', function() {
    $(this).parent().siblings('.vide').find('.dots')
    .slideToggle({
        start: function() {
          if ($(this).parent(".vide").hasClass('arti'))
            $(this).siblings('.more').show('slow');
          else $(this).siblings('.more').hide("slow");
        },
        complete: function() {
          if ($(this).is(':visible'))
            $(this).parent('.vide').addClass('arti')
            .siblings('.py-2').find(".myBtn")
            .text('+ Afficher plus');
          else
            $(this).parent(".vide").removeClass('arti')
            .siblings('.py-2').find('.myBtn')
            .text('- Afficher moins');
        }
      });
  });

08/03/2022, 08h07
spawns

Merci Toufik83,
effectivement les 2 solutions fonctionnent nikel.
Y en a t'il une a privilégier ?
concernant l'animation y a t il une solution pour que cela apparaisse avec un fondu régulier ?
J'ai essayé fadeIn / fadeOut mais ce n'est pas terrible...

Bonjour,

Les deux solutions sont bonnes, sauf que la deuxième permet d'ajouter d'autres options si tu en auras besoin après...

Pour le fondu régulier, tu peux utiliser les @keyframes de Css et appliquer une régle sur l'élément .more :
Code:

1 2 3 4 5 6 7 8 9 10 11 .more{ animation-name:fondu; animation-duration: 2s; } @keyframes fondu { from {opacity: .1}/*au départ 0% l'opacity est a 0.1 */ 30% {opacity:.3}/*à 30% l'opacity est a 0.3 */ 70% {opacity:.7}/*à 70% l'opacity est a 0.7 */ to {opacity:1}/*à la fin l'opacity est a 1 */ }

08/03/2022, 17h51
spawns

Merci de ton aide.
c'est Nikel

Cdt