[Résolu] Apparition d'un texte avec un bouton

Bonjour,

Je débute en HTLM et CSS et j'ai trouvé comment créer un bouton dans le CSS mais j'aimerais qu'en cliquant sur ce bouton un texte apparaisse.

Par exemple j'ai le bouton "Question" et en cliquant dessus je voudrais que le texte "Quel temps fait-il ?" apparaisse.

Merci d'avance
Modifié par sebastb (25 Sep 2016 - 16:03)

sebastb a écrit :
Bonjour,
Je débute en HTLM et CSS et j'ai trouvé comment créer un bouton dans le CSS mais j'aimerais qu'en cliquant sur ce bouton un texte apparaisse.
Par exemple j'ai le bouton "Question" et en cliquant dessus je voudrais que le texte "Quel temps fait-il ?" apparaisse.
Merci d'avance

Afficher une fenêtre d'alerte

Bonjour Sebastp,

Quel est le code de ton fameux bouton ?

.button {
    background-color: #FF0000;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
	transition-duration: 0.4s;
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

Modifié par sebastb (25 Sep 2016 - 15:31)

Bonjour,

C'est pas ma spécialité, mais en jouant sur "visibility: visible/hidden" avec un "onclick", ça ne serait pas possible.

Du genre:

JS

<script type="text/javascript">
function OnOff() {
if (document.getElementById("texte").style.visibility== "visible")
document.getElementById("texte").style.visibility= "hidden";
else
document.getElementById("texte").style.visibility= "visible";
}
</script>

HTML

<span id="texte" style="visibility: hidden;">truc truc</span><br />
<input type="button" value="ON/OFF" onclick="OnOff();">

sebastb a écrit :
Non je ne veux pas afficher de fenêtre d'alerte
Je voudrais que quand je clique sur ce bouton :
upload/62923-Bouton.PNG
Le mot "Moi" Apparaissent à droite du bouton

D'où la nécessité d'être précis dans l'expression de tes besoins...

sebastb a écrit :
Par exemple j'ai le bouton "Question" et en cliquant dessus je voudrais que le texte "Quel temps fait-il ?" apparaisse.

Les formulations "apparaisse" et "apparaissent à droite du bouton" n'ont pas la même signification.
En venant sur le forum, tu cherches le "comment", mais c'est à toi d'indiquer le "où" et le "quand" de tes actions.
Modifié par sepecat (25 Sep 2016 - 15:41)

dann a écrit :


HTML

<span id="texte" style="visibility: hidden;">truc truc</span><br />
<input type="button" value="ON/OFF" onclick="OnOff();">

Merci, j'ai essayé l'idée est bonne mais le texte ne disparait et apparait pas (à droite du bouton) lors du clic seulement si je change la visibility dans le code.
La commande

onclick="OnOff();

ne semble pas marcher

sepecat a écrit :

D'où la nécessité d'être précis dans l'expression de tes besoins...

Les formulations "apparaisse" et "apparaissent à droite du bouton" n'ont pas la même signification.
En venant sur le forum, tu cherches le "comment", mais c'est à toi d'indiquer le "où" et le "quand" de tes actions.

D'accord autant pour moi, premiere fois que je viens sur ce forum je le saurais pour la prochaine fois
Modifié par sebastb (25 Sep 2016 - 15:49)

Je crois avoir compris il faut coder aussi en Java Script pour que ça marche c'est ça ?
On ne peut pas faire que avec du code HTML et CSS ?

sebastb a écrit :
Je crois avoir compris il faut coder aussi en Java Script pour que ça marche c'est ça ?
On ne peut pas faire que avec du code HTML et CSS ?

CSS n'est pas un language de programmation.
Ses possibilités se limitent à quelques actions d'affichage / occultation liées au survol d'un élément, ou des effets visuels (transitions, etc.).
Pour une manipulation dynamique du contenu de la page côté client, c'est HTML / Javascript.

Ok merci beaucoup à tous pour vos infos je vais utiliser la commande avec le JS.

Sujet résolu