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