Cliquer sur un bouton pour faire apparaitre un paragraphe/image

Résolu/Fermé

Html Css

Valentin-Let Messages postés 4 Date d'inscription mercredi 19 avril 2017 Statut Membre Dernière intervention 20 avril 2017 - 19 avril 2017 à 22:25
nass6906 Messages postés 30 Date d'inscription lundi 16 mars 2015 Statut Membre Dernière intervention 17 avril 2018 - 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.

A voir également:

Afficher un texte en cliquant sur un bouton html
Dans le texte, un seul mot a réellement été écrit en majuscule. quel est ce mot ? ✓ - Forum Word
Ce programme est écrit en python. il construit un mot secret dans une variable mais il ne l'affiche pas. modifiez-le pour qu'il affiche le mot secret. exécutez-le. quel est ce mot secret ? ✓ - Forum Python
Bouton on off ✓ - Forum Loisirs / Divertissements
Mettre un texte en majuscule - Guide
Cliquez sur ce lien. en n'utilisant que le clavier, quel mot obtenez-vous ? ✓ - Forum souris / Touchpad

6 réponses

Réponse 1 / 6

jordane45 Messages postés 36557 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 novembre 2022 4 391
20 avril 2017 à 08:59

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 Messages postés 138 Date d'inscription samedi 18 mars 2017 Statut Membre Dernière intervention 26 octobre 2020 24
20 avril 2017 à 10:14

C'est pas pour moi mais merci parce que j'aurais jamais su lui répondre

Réponse 2 / 6

jordane45 Messages postés 36557 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 novembre 2022 4 391
Modifié le 20 avril 2017 à 23:48

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

nass6906 Messages postés 30 Date d'inscription lundi 16 mars 2015 Statut Membre Dernière intervention 17 avril 2018
10 avril 2018 à 13:53

Bonjour,
J'ai une question, en fait je suis un peu dans le même cas, en gros j'ai deux boutons AllumeLED0/EteindreLED0, ils sont bien indépendant et ils fonctionnent bien sauf que je doit rajouter une fonctionnalité qui du genre: quand je clique allumer, elle allume la LED et qu'elle m'affiche une image qui montre qu'elle est bien allumer, je n'arrive a gérer ça.
si vous pouviez m'aider ça sera gentil de votre part. merci
Bonne journée

jordane45 Messages postés 36557 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 novembre 2022 4 391
10 avril 2018 à 16:52

Merci d'ouvrir ta propre discussion.
Ca sera plus simple à suivre.
Pense a y mettre ton code.

nass6906 Messages postés 30 Date d'inscription lundi 16 mars 2015 Statut Membre Dernière intervention 17 avril 2018
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 Messages postés 36557 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 novembre 2022 4 391
11 avril 2018 à 13:46

Tu mets en commentaire la ligne 102

jordane45 Messages postés 36557 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 novembre 2022 4 391
11 avril 2018 à 13:47

105 pardon.

Réponse 3 / 6

clementcookie45 Messages postés 138 Date d'inscription samedi 18 mars 2017 Statut Membre Dernière intervention 26 octobre 2020 24
19 avril 2017 à 22:35

Je suis pas un pro mais je pense que ça doit pouvoir se faire en JavaScript

Valentin-Let Messages postés 4 Date d'inscription mercredi 19 avril 2017 Statut Membre Dernière intervention 20 avril 2017
Modifié le 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 Messages postés 138 Date d'inscription samedi 18 mars 2017 Statut Membre Dernière intervention 26 octobre 2020 24 > Valentin-Let Messages postés 4 Date d'inscription mercredi 19 avril 2017 Statut Membre Dernière intervention 20 avril 2017
19 avril 2017 à 23:09

Css je pense pas regarde sur internet si il y a pas des lignes de codes toute faites

Réponse 6 / 6

Valentinbnd Messages postés 4 Date d'inscription mercredi 19 avril 2017 Statut Membre Dernière intervention 20 avril 2017
20 avril 2017 à 21:07

Merci beaucoup Jordane, je regarde ça de suite

TheBiShop, notre prof nous a inerdit d'utiliser ces choses là ^^

ThEBiShOp Messages postés 8318 Date d'inscription jeudi 22 mars 2007 Statut Contributeur Dernière intervention 8 février 2021 1 596
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.

Discussions similaires

[HTML/CSS] Position bouton.

HTML remonter en haut d'une page

HTML - définir taille bouton

html : taille d'un bouton

Faire passer du texte SOUS une image HTML / CSS

Ecrire du texte à coté de l 'image

Discussions similaires

Newsletters