Afficher un texte via un bouton (image) et le masquer en cliquant sur un autre bouton.

**LegendaryDeath** · 15/06/2017, 11h50

Bonjour bonsoir,
Je suis actuellement en train d'apprendre le HTML , CSS , JavaScript ect..
Or je veux faire un site test pour un magasin de vêtements, et donc sur une partie de la page, il y a plusieurs images avec une légende en bas il y a une image en forme de + à côté de la légende de chaque image,
Et je veux que quand je clique sur le +, il y a une description qui s'affiche sur l'image, et que je masque cette description tout en cliquant sur un autre + (ou en cliquant autre part sur la page.)
Je vous montre ce que je veux.
Nom : Capture.PNG
Affichages : 2361
Taille : 796,5 Ko

Nom : Capture.PNG
Affichages : 2361
Taille : 796,5 Ko

Cette image est une partie de la maquette du site.
Je tiens à vous préciser que je viens de débuter dans ce domaine, donc ne m'en voulez pas si je n'y arrive pas ..

**orphen** · 15/06/2017, 15h55

Si tu utilise jquery je t'invite a chercher du coter de la methode "toggle".
Si tu ne l'utilise pas je t'invite a l'utiliser

https://www.w3schools.com/jquery/try...ery_eff_toggle

Orphen

**LegendaryDeath** · 15/06/2017, 16h14

Merci pour ta réponse, j'ai déjà entendu parlé du JQuery mais je n'ai jamais tapé un seul code de ceci, donc j'ignore comment l'utiliser.. :/
Et en regardant ton lien d'exemple, j'ai remarqué que lorsque j'appuis sur le bouton, le texte s'affiche mais le bouton descend.. Est-ce possible que lorsque j'appuis, le texte s'affiche en haut du bouton sans le faire bouger comme ça il apparait sur l'image de fond et de même pour le bouton (à voir l'image que j'ai montré)
Désolé si je ne suis pas clair de mon explication

**orphen** · 15/06/2017, 16h42

En effet ce n'est pas très clair.
Si le bouton se déplace c'est parce que l’élément paragraphe n'est plus afficher du coup le bouton prend naturellement sa place.

Si tu ne veux pas que le bouton se déplace tu peux par exemple mettre ton paragraphe (ou importe qu'elle élément) dans une div avec une hauteur fixe.

Sylvain

**LegendaryDeath** · 15/06/2017, 16h55

Après avoir testé ton code avec 2 boutons, 2 paragraphes, le code ne correspond pas à mes attentes.
imaginons, j'ai 2 boutons ( bouton1 et bouton2 )
Je clique sur le bouton1 et ça affiche le paragraphe1
Or si juste après je clique sur le bouton2 ça affiche le paragraphe2 MAIS le paragraphe1 ne sera plus affiché !
C'est cela que je souhaite avoir.

**orphen** · 15/06/2017, 17h37

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
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title></title>
 
  </head>
 
<body>
  <div>
	  <p>Paragraphe 1</p>
	  <button>clique moi 1</button>
  </div>
  <div>
	  <p>Paragraphe 2</p>
	  <button>clique moi 2</button>
  </div>
 
 
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 
 
    <script>
        $(document).ready(function(){
                $('button').on('click', function(){
                        var $that = $(this);
                        $('p').hide();
                        $($that).prev('p').show();
                });
        });
 
  </script>
 
</body>
</html>

Je te laisse l'adapter a tes besoins

Sylvain

Afficher un texte via un bouton (image) et le masquer en cliquant sur un autre bouton.

JavaScript

Vue hybride

Discussions similaires

Partager

Partager