JQuery show / hide

Résolu
Bonjour,
Comment "show - hide" une div en jQuery ou avec vanilla js ?

<div class="carte mx-2">
					<div class="carte-top">
						<h4 class="titre text-center">Grand-Père</h4>
					</div>
					<div class="card-body">
						<div class="carte-img">
							<img src="img/gris.png" alt="">
						</div>
						<div class="carte-body text-center">
							<h5 id="grandPere"></h5>
						</div>				  
					</div>
				</div>
				<div class="carte mx-2">
					<div class="carte-top">
						<h4 class="titre text-center">Grand-Mère</h4>
					</div>
					<div class="card-body">
						<div class="carte-img">
							<img src="img/grise.png" alt="">
						</div>
						<div class="carte-body text-center">
							<h5 id="grandMere"></h5>
						</div>				  			
					</div>
				</div>

Je veux afficher ou masquer la div "card-body" en cliquant sur la div "carte-top" utilisant "$(this)".

Merci à tous.

Cordialement

Configuration: Windows / Edge 103.0.1264.44

5 réponses

  1. Modérateur
    Bonjour,

    1 - Ta question concernant du javascript ... il eut été bien de la mettre dans le forum javascript ! (je la déplace)

    2 -
    Comment "show - hide" une div en jQuery

    La réponse est dans la question .... en utilisant les méthodes .show() ou .hide()

    utilisant "$(this)"

    Donc en fait, ta question c'est : comment "cibler" l'élément ayant la class card-body qui se trouve après l'élément cliqué
    pour ça, tu peux, en jquery, utiliser la méthode .parent() puis .find()
    1. Merci,

      Un peu novice en jQuery, aurais tu vous un exemple de code.

      Merci,

      Cordialement,

      Chabinot
      1. Modérateur
          $(".carte-top").click(function (){
              let card_body = $(this).parent().find('.card-body');
              card_body.toggle(); //on masque
          });
        

        1. Merci beaucoup.
          1. Modérateur

            Tu penseras à marquer la discussion en résolue.

            Merci.

        2. D'accord, mais comment faire.

          1. Modérateur

            Clique sur les trois petits points en dessous de ta question (premier message de cette discussion)

            Tu auras 'a possibilité de la mettre en résolue.