Cliquer sur un bouton pour faire apparaitre un paragraphe/image [Résolu/Fermé]
Signaler
Valentin-Let
nass6906
- Messages postés
- 4
- Date d'inscription
- mercredi 19 avril 2017
- Statut
- Membre
- Dernière intervention
- 20 avril 2017
nass6906
- Messages postés
- 30
- Date d'inscription
- lundi 16 mars 2015
- Statut
- Membre
- Dernière intervention
- 17 avril 2018
A voir également:
- Afficher un texte en cliquant sur un bouton html
- Cliquer sur un bouton pour faire apparaitre un paragraphe/image ✓ - Forum - Javascript
- Afficher / masquer ou plier/déplier une zone de texte ✓ - Forum - HTML
- [html] cacher ou afficher des éléments ✓ - Forum - HTML
- Afficher du texte en cliquant sur un mot - Forum - Webmaster
- PHP Afficher texte après clique sur un bouton ✓ - Forum - PHP
6 réponses
jordane45
- Messages postés
- 31468
- Date d'inscription
- mercredi 22 octobre 2003
- Statut
- Modérateur
- Dernière intervention
- 24 février 2021
Bonjour,
1 - Merci de coller le code directement sur le forum au lieu d'en mettre une image. Cela nous permettrait d'en faire un copier/coller pour t'aider ... au lieu de devoir le retaper !
2 - En javascript tu peux jouer sur le style.display pour afficher ou masquer un élément htmll
1 - Merci de coller le code directement sur le forum au lieu d'en mettre une image. Cela nous permettrait d'en faire un copier/coller pour t'aider ... au lieu de devoir le retaper !
2 - En javascript tu peux jouer sur le style.display pour afficher ou masquer un élément htmll
//masquer document.getElementById("id_de_ton_paragraphe").style.display = "none"; //Afficher document.getElementById("id_de_ton_paragraphe").style.display = "block";
Signaler
clementcookie45
- Messages postés
- 138
- Date d'inscription
- samedi 18 mars 2017
- Statut
- Membre
- Dernière intervention
- 26 octobre 2020
C'est pas pour moi mais merci parce que j'aurais jamais su lui répondre
jordane45
- Messages postés
- 31468
- Date d'inscription
- mercredi 22 octobre 2003
- Statut
- Modérateur
- Dernière intervention
- 24 février 2021
Tiens... voici le code corrigé et grandement amélioré/complété
Cordialement,
Jordane
<html> <head> <title>TEST</title> <meta charset="utf8"> <style> button.btnmateriel{ font-size: 1.5em; padding: 5px; } .onglet{ display:none; width:100%; min-height:60px; padding:10px; margin :5px; border : 1px solid black; } .active{ background-color : green; } </style> </head> <body> <section class="boutique"> <p> <button class="btnmateriel active" id="btn_1" data-onglet="1" > materiel dessin papier </button> <button class="btnmateriel" id="btn_2" data-onglet="2" > materiel dessin tablette </button> </p> <div class="div_onglets"> <div id="onglet_1" class="onglet"> <p> Ceci est l'onglet N° 1 </p> </div> <div id="onglet_2" class="onglet"> <p> Ceci est l'onglet N° 2 </p> </div> </div> </section> <script type="text/javascript"> function hideAllElementByClassNam(clName){ var onglets = document.getElementsByClassName("onglet"); //on masque tous les onglets for (var i = 0; i < onglets.length; i++) { onglets[i].style.display = 'none'; } } function ShowElementById(idElm){ document.getElementById(idElm).style.display = "inline-block"; } function addClassActiveElm(idElm){ var cl_btn_active = document.getElementsByClassName("active"); //on retire la class Active de tous les onglets for (var i = 0; i < cl_btn_active.length; i++) { removeClass(cl_btn_active[i],"active") ; } //on met la class active au bouton cliqué document.getElementById(idElm).className = "btnmateriel active"; } function removeClass(e,c) { e.className = e.className.replace( new RegExp('(?:^|\\s)'+c+'(?!\\S)') ,''); } var DisplayHideOnglets = function() { //on masque tous les onglets hideAllElementByClassNam('onglet'); //numero de l'onglet à afficher var NumOnglet = this.getAttribute("data-onglet"); //on affiche l'onglet if(typeof(NumOnglet) !="undefined" && NumOnglet!=null){ ShowElementById("onglet_"+NumOnglet); addClassActiveElm("btn_"+NumOnglet); } }; function initListener(){ //on ajoute le listener var cl_btnmateriel = document.getElementsByClassName("btnmateriel"); for (var i = 0; i < cl_btnmateriel.length; i++) { cl_btnmateriel[i].addEventListener('click', DisplayHideOnglets, false); } } //Initialisation initListener(); //par défaut.. on affiche le premier onglet ShowElementById("onglet_1"); </script> </body> </html>
Cordialement,
Jordane
clementcookie45
- Messages postés
- 138
- Date d'inscription
- samedi 18 mars 2017
- Statut
- Membre
- Dernière intervention
- 26 octobre 2020
Je suis pas un pro mais je pense que ça doit pouvoir se faire en JavaScript
clementcookie45
- Messages postés
- 138
- Date d'inscription
- samedi 18 mars 2017
- Statut
- Membre
- Dernière intervention
- 26 octobre 2020
- Messages postés
- 4
- Date d'inscription
- mercredi 19 avril 2017
- Statut
- Membre
- Dernière intervention
- 20 avril 2017
Css je pense pas regarde sur internet si il y a pas des lignes de codes toute faites
Valentinbnd
- Messages postés
- 4
- Date d'inscription
- mercredi 19 avril 2017
- Statut
- Membre
- Dernière intervention
- 20 avril 2017
Bonjour merci pour votre réponse
j'ai essayé d'avancer mais je n'y arrive pas, voici ce que j'ai fait :
HTML
CSS
JS
j'ai essayé d'avancer mais je n'y arrive pas, voici ce que j'ai fait :
HTML
<section class="boutique">
<p>
<button class="btnmateriel">materiel dessin papier</button>
<button class="btnmateriel">materiel dessin tablette</button>
</p>
<p> BONJOUR </p>
<p id="materieltxt"> AUREVOIR </p>
<script type="boutton" src="js/java.js"></script>
</section>
CSS
button.btnmateriel{
font-size: 1.5em;
padding: 5px;
}
JS
var btn = document.querySelectorAll(".btnmateriel");
btn[0].addEventListener("click", function () {
document.getElementById("materieltxt").style.display = "none";
}, false);
btn[1].addEventListener("click", function () {
document.getElementById("materieltxt").style.display = "block";
}, false);
ThEBiShOp
- Messages postés
- 8320
- Date d'inscription
- jeudi 22 mars 2007
- Statut
- Contributeur
- Dernière intervention
- 8 février 2021
Salut,
suivant l'avancement de ton site, mon conseil serait d'utiliser un framework CSS tel que bootstrap. Ces fonctionnalités pour masquer un paragraphe sont déjà prévues, tu n'as quasiment rien à faire et c'est d'une aide précieuse pour mettre en page ton code HTML.
Le soucis c'est que si tu as déjà fait beaucoup de CSS toi même, tu risques de devoir laisser de côté une partie de ce que tu as déjà fait.
Si tu arrives à t'en sortir, tant mieux, mais je te conseillerais pour un prochain projet de te pencher sur cette solution qui facilite énormément la vie !
suivant l'avancement de ton site, mon conseil serait d'utiliser un framework CSS tel que bootstrap. Ces fonctionnalités pour masquer un paragraphe sont déjà prévues, tu n'as quasiment rien à faire et c'est d'une aide précieuse pour mettre en page ton code HTML.
Le soucis c'est que si tu as déjà fait beaucoup de CSS toi même, tu risques de devoir laisser de côté une partie de ce que tu as déjà fait.
Si tu arrives à t'en sortir, tant mieux, mais je te conseillerais pour un prochain projet de te pencher sur cette solution qui facilite énormément la vie !
Valentinbnd
- Messages postés
- 4
- Date d'inscription
- mercredi 19 avril 2017
- Statut
- Membre
- Dernière intervention
- 20 avril 2017
Merci beaucoup Jordane, je regarde ça de suite
TheBiShop, notre prof nous a inerdit d'utiliser ces choses là ^^
TheBiShop, notre prof nous a inerdit d'utiliser ces choses là ^^
ThEBiShOp
- Messages postés
- 8320
- Date d'inscription
- jeudi 22 mars 2007
- Statut
- Contributeur
- Dernière intervention
- 8 février 2021
Ahah, c'est pour les cours, ok.
Bah c'est certain qu'il faut comprendre le CSS avant d'utiliser des outils pour te faciliter la vie.
Si tu fais un projet perso, essaie de regarder comment ça fonctionne, entre les framework PHP et les framework CSS, c'est vraiment magique, le jour où je m'y suis mis, j'ai redécouvert la joie de développer, vraiment.
Bah c'est certain qu'il faut comprendre le CSS avant d'utiliser des outils pour te faciliter la vie.
Si tu fais un projet perso, essaie de regarder comment ça fonctionne, entre les framework PHP et les framework CSS, c'est vraiment magique, le jour où je m'y suis mis, j'ai redécouvert la joie de développer, vraiment.