Discussion :

[spawns]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Toufik83]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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');
        }
      });
  });

[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...

[Toufik83]

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 */
}

[spawns]

Merci de ton aide.
c'est Nikel

Cdt