Discussion :

[boubourse92]

Bonjour à tous ,

Pour un site web je voudrais afficher une card cliquée , l'agrandir et cachée les autres.
Je me suis lancé dans un petit scritp JS et je rencontre deux petits soucis.

1- Mon script fonctionne sur la première card , mais pas sur les autres. Cela agrandi toujours la 1ere quand je clique sur la 2éme , 3éme ou 4éme, comment rester dans la card cliqué ?
2- la fonction ne se recharge pas automatiquement j'ai donc ajouté a la fin

Code :

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

location.reload();

, est ce qu'il y a une autre possibilité ? le reload n'est pas très agréable lors de la navigation .

ci- dessous le

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
    <div class="row mt-2 justify-content-center">
      <div class="card-deck mt-2 justify-content-center text-center">
        <div id="size" class=".col-sm-3 .col-xs-6 mb-2 mr-2 ml-2 ">
          <div id="card" class="card column creches" style="width:18rem;">
            <img src="img/references/creche/Eiders_paris19/1.jpg" class="card-img-top" alt="Créche - Eiders">
            <div class="card-body ">
              <h5 class="card-title">Eiders</h5><p><i>Créche - Paris 19</i></p> 
              <a href="#" data-toggle="collapse" data-target="#c1"><i id="btnplus" class="fas fa-plus-circle fa-lg"></i></a>
              <div class="col-12 collapse fade" id="c1">
                <p>Nullam sapien massa, aliquam in cursus ut, ullamcorper in tortor. Aliquam codeply mauris arcu, tristique a lobortis vitae, condimentum feugiat justo.
                </p>
              </div>
            </div>
          </div>
        </div>
        <div id="size" class=".col-sm-3 .col-xs-6 mb-2 mr-2 ml-2">
          <div id="card" class="card column creches" style="width: 18rem;">
            <img src="img/references/creche/Le _moulin_en_herbe/1.jpg" class="card-img-top" alt="Créche - Le moulin en herbe">
            <div class="card-body">
              <h5 class="card-title">Le moulin en herbe</h5><p><i>Créche - Paris 12</i></p> 
              <a href="#" data-toggle="collapse" data-target="#c2"><i id="btnplus" class="fas fa-plus-circle fa-lg"></i></a>
              <div class="col-12 collapse fade" id="c2">
                <p>Nullam sapien massa, aliquam in cursus ut, ullamcorper in tortor. Aliquam codeply mauris arcu, tristique a lobortis vitae, condimentum feugiat justo.
                </p>
              </div>
            </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
19
20
21
22
<script>
   $("#btnplus").on( "click", function() {
    if($("#btnplus").hasClass("fas fa-plus-circle fa-lg")){
      console.log("Hello passed in if");
      $('#size').attr('id', 'selected');// add id selected to div size
      $('#card').attr('id', 'cardselected');// add id selected to div card
      $('#selected').show(); // show div card clicked
      $('div#size').hide(); //hide all other div cards
      $('#cardselected').attr('style','width: 40rem'); // expand the clicked card
      $('#btnplus').removeClass('fa-plus-circle').addClass('fa-minus-circle'); //change button from + to - 
    }
    else {
      console.log("Hello passed in else");
      $('#cardselected').attr('style','width: 18rem');
      $('#cardselected').attr('id', 'card');
      $('#selected').attr('id', 'size');
      $('div#size').show();
      $('#btnplus').removeClass('fa-minus-circle').addClass('fa-plus-circle');
      location.reload();
    }
  });
</script>

Merci d'avance pour votre aide

[Toufik83]

Bonjour,

Attention, tu as plusieurs éléments avec le même id

Code html :

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

<div id="size" class=".col-sm-3 .col-xs-6 mb-2 mr-2 ml-2">

et

Code html :

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

<i id="btnplus" class="fas fa-plus-circle fa-lg"></i>

et

Code html :

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

<div id="card" class="card column creches" style="width:18rem;">

alors qu'un id doit être unique dans une page html.

Il serait judicieux de ne pas utiliser les id (les supprimer ou les remplacer par une class) et attacher l'évènement click aux <i> en utilisant seulement leurs classe, donc commence par remplacer id="size" par class="size" puis utilise ce code :

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
 
$(".card").on("click",".fas",function(){
   if($(this).hasClass("fa-plus-circle")){
     $(this)
     .removeClass('fa-plus-circle')
     .addClass('fa-minus-circle')
     .closest(".card").css("width", "40rem")
     .show()//affiche le parent supérieur de ".fas" ayant la classe "card"
     .parent('.size').show();
  }
  else{
     $(this)
     .removeClass('fa-minus-circle')
     .addClass('fa-plus-circle')
     .closest(".card").css("width","18rem")
     .hide()
     .parent(".size").hide();
  }
});

Une autre remarque:

Code html :

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

 <div id="size" class=".col-sm-3 .col-xs-6 mb-2 mr-2 ml-2"></div>

, tu ne vois pas que les points précèdent les 2 premières classes ?

[boubourse92]

Merci Toufik83 pour le code et pour le petite rafraîchissement de mémoire concernant les ID !
c'est beaucoup plus propre

Pour le hide des autres cards dans le if , il faut que je fasse un hide en allant chercher card-deck ?

Code :

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

1
2
 
.closest(".card-deck").not(this).hide(".card");

mais cela cache toutes les cards meme celle qui a été cliqué , est ce qu'il y a une autre methode ?

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
$(".card").on("click",".fas",function(){
   if($(this).hasClass("fa-plus-circle")){
     $(this)
     .removeClass('fa-plus-circle')
     .addClass('fa-minus-circle')
     .closest(".card").css("width", "40rem")
     .show();//affiche le parent supérieur de ".fas" ayant la classe "card"
     .parent(".size").show();
     .closest(".card-deck").hide(".card")but;
 
  }
  else{
     $(this)
     .removeClass('fa-minus-circle')
     .addClass('fa-plus-circle')
     .closest(".card").css("width","18rem")
     .closest(".card-deck").show(".card");
  }
});

[Toufik83]

Bonjour,

Il y'a des erreurs dans le code, des points virgules en trop

Code :

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

1
2
3
.show(); //ici
     .parent(".size").show(); //et ici
     .closest(".card-deck").hide(".card")but;

Et je pense aussi que tu peux utiliser les méthodes show() et hide() seulement avec les .size et simplifier le code comme suite :

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
 
<div class="row mt-2 justify-content-center">
  <div class="card-deck mt-2 justify-content-center text-center">
    <div class="size" class="col-sm-3 col-xs-6 mb-2 mr-2 ml-2 ">
      <div class="card" class="card column creches" style="width:18rem;">
        <img src="img/references/creche/Eiders_paris19/1.jpg" class="card-img-top" alt="Créche - Eiders">
        <div class="card-body ">
          <h5 class="card-title">Eiders</h5>
          <p><i>Créche - Paris 19</i></p>
          <a href="#" data-toggle="collapse" data-target="#c1"><i  class="fas fa-plus-circle fa-lg"></i></a>
          <div class="col-12 collapse fade" id="c1">
            <p>Nullam sapien massa, aliquam in cursus ut, ullamcorper in tortor. Aliquam codeply mauris arcu, tristique a lobortis vitae, condimentum feugiat justo.
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="size" class="col-sm-3 col-xs-6 mb-2 mr-2 ml-2">
      <div class="card" class="card column creches" style="width: 18rem;">
        <img src="img/references/creche/Le _moulin_en_herbe/1.jpg" class="card-img-top" alt="Créche - Le moulin en herbe">
        <div class="card-body">
          <h5 class="card-title">Le moulin en herbe</h5>
          <p><i>Créche - Paris 12</i></p>
          <a href="#" data-toggle="collapse" data-target="#c2"><i  class="fas fa-plus-circle fa-lg"></i></a>
          <div class="col-12 collapse fade" id="c2">
            <p>Nullam sapien massa, aliquam in cursus ut, ullamcorper in tortor. Aliquam codeply mauris arcu, tristique a lobortis vitae, condimentum feugiat justo.
            </p>
          </div>
        </div>
      </div>
    </div>

et jQuery :

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
 
 $(".card").on("click", ".fas", function() {
  //cacher tous les .size sauf le parent de l'élément sur lequel on clique.
   $(".size").not($(this).closest('.size')).hide(); 
   if ($(this).hasClass("fa-plus-circle")) {
     $(this)
       .removeClass('fa-plus-circle')
       .addClass('fa-minus-circle')
       .closest(".card").css("width", "40rem");
   } else {
     $(".size").show();//affiche tous les .size
     $(this)
       .removeClass('fa-minus-circle')
       .addClass('fa-plus-circle')
       .closest(".card").css("width", "18rem");
 
   }
 });

[boubourse92]

Yes ca fonctionne ! Merci !

j'ai ajouté le show dans le else

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
 
<script>
$(".card").on("click",".fas",function(){
  $(".size").not($(this).closest('.size')).hide();//cacher tous les .size sauf le parent de l'élément sur lequel on clique.
  if($(this).hasClass("fa-plus-circle")){
    $(this)
    .removeClass('fa-plus-circle')
    .addClass('fa-minus-circle')
    .closest(".card").css("width", "40rem");
 }
 else{
    $(".size").show();
    $(this)
    .removeClass('fa-minus-circle')
    .addClass('fa-plus-circle')
    .closest(".card").css("width","18rem")
 }
});
 
</script>