Remplacer Class dans HTML

Version imprimable

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:

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:

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:

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

Bonjour,

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

Code:

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

et

Code:

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

et

Code:

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

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:

<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 ?

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

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

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:

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

Bonjour,

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

Code:

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:

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:

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

Yes ca fonctionne ! Merci !

j'ai ajouté le show dans le else 8-)

Code:

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>