Menu

Cliquer sur un bouton pour faire apparaitre un paragraphe/image [Résolu/Fermé]

Valentin-Let 4 Messages postés mercredi 19 avril 2017Date d'inscription 20 avril 2017 Dernière intervention - 19 avril 2017 à 22:25 - Dernière réponse : nass6906 31 Messages postés lundi 16 mars 2015Date d'inscription 17 avril 2018 Dernière intervention
- 12 avril 2018 à 12:50
Bonjour,
J'ai besoin d'aide, je suis en train de faire un site web. Mon problème est le suivant, je voudrais que lorsque l'on clique sur un des deux boutons suivant (Materiel ----) un paragraphe s'affiche en dessous selon le bouton sur lequel on vient de cliquer.

Mon but est de faire un espace boutique et lorsque je clique sur un des deux boutons ça m'affiche les articles associés.







Afficher la suite 

16 réponses

clementcookie45 127 Messages postés samedi 18 mars 2017Date d'inscription 8 juillet 2018 Dernière intervention - 19 avril 2017 à 22:35
0
Merci
Je suis pas un pro mais je pense que ça doit pouvoir se faire en JavaScript
Valentin-Let 4 Messages postés mercredi 19 avril 2017Date d'inscription 20 avril 2017 Dernière intervention - 19 avril 2017 à 23:05
Oui c'est aussi ce que je pensais, sauf que JavaScript j'en ai fait très peu (et j'ai beaucoup de mal ^^) et en css impossible de trouver une solution
clementcookie45 127 Messages postés samedi 18 mars 2017Date d'inscription 8 juillet 2018 Dernière intervention > Valentin-Let 4 Messages postés mercredi 19 avril 2017Date d'inscription 20 avril 2017 Dernière intervention - 19 avril 2017 à 23:09
Css je pense pas regarde sur internet si il y a pas des lignes de codes toute faites
jordane45 21701 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 juillet 2018 Dernière intervention - 20 avril 2017 à 08:59
0
Merci
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
//masquer
document.getElementById("id_de_ton_paragraphe").style.display = "none";

//Afficher
document.getElementById("id_de_ton_paragraphe").style.display = "block";

clementcookie45 127 Messages postés samedi 18 mars 2017Date d'inscription 8 juillet 2018 Dernière intervention - 20 avril 2017 à 10:14
C'est pas pour moi mais merci parce que j'aurais jamais su lui répondre
Valentinbnd 4 Messages postés mercredi 19 avril 2017Date d'inscription 20 avril 2017 Dernière intervention - Modifié par Valentinbnd le 20/04/2017 à 15:41
0
Merci
Bonjour merci pour votre réponse
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);
jordane45 21701 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 juillet 2018 Dernière intervention - Modifié par jordane45 le 20/04/2017 à 23:48
0
Merci
Tiens... voici le code corrigé et grandement amélioré/complété
<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                                                                 
jordane45 21701 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 juillet 2018 Dernière intervention - 10 avril 2018 à 16:52
Merci d'ouvrir ta propre discussion.
Ca sera plus simple à suivre.
Pense a y mettre ton code.
nass6906 31 Messages postés lundi 16 mars 2015Date d'inscription 17 avril 2018 Dernière intervention - 11 avril 2018 à 11:09
Comment put-on faire pour que par défaut il affiche aucun onglet et juste en cliquant ça va l’afficher ?
jordane45 21701 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 juillet 2018 Dernière intervention - 11 avril 2018 à 13:46
Tu mets en commentaire la ligne 102
jordane45 21701 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 juillet 2018 Dernière intervention - 11 avril 2018 à 13:47
105 pardon.
nass6906 31 Messages postés lundi 16 mars 2015Date d'inscription 17 avril 2018 Dernière intervention - 12 avril 2018 à 12:50
d'accord merci
ThEBiShOp 8565 Messages postés jeudi 22 mars 2007Date d'inscriptionContributeurStatut 18 juillet 2018 Dernière intervention - 20 avril 2017 à 18:12
0
Merci
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 !
Valentinbnd 4 Messages postés mercredi 19 avril 2017Date d'inscription 20 avril 2017 Dernière intervention - 20 avril 2017 à 21:07
0
Merci
Merci beaucoup Jordane, je regarde ça de suite

TheBiShop, notre prof nous a inerdit d'utiliser ces choses là ^^
ThEBiShOp 8565 Messages postés jeudi 22 mars 2007Date d'inscriptionContributeurStatut 18 juillet 2018 Dernière intervention - 21 avril 2017 à 10:11
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.