Apparition de texte avec boutons

Fermé

Debutant - Modifié le 5 déc. 2017 à 00:45
jordane45 Messages postés 38369 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 3 janvier 2025 - 5 déc. 2017 à 00:49

Bonjour,

Voilà mon problème, j'aimerais créer plusieurs bouton en haut de ma page, qui lorsque l'on clique sur un bouton, un texte apparaît + un autre bouton, qui lorsque l'on clique sur lui un texte apparaît seulement. Ce système texte+bouton doit apparaître sur tous mes boutons en haut.

<style>
  button.btnmateriel{
    font-size: 1.5em;
    padding: 5px;
  }
  
  .onglet{
    display:none;
    width:100%;
    min-height:60px;
    padding:10px;
    margin :5px;
    border : 0px solid black;
  }
  
  .active{
    background-color : green;
  }
</style>
  
 <body>
 <center>
  <section class="boutique">
    <p>
      <button class="btnmateriel active" id="btn_1" data-onglet="1" >Test 1</button>
      <button class="btnmateriel" id="btn_2" data-onglet="2" >Test 2</button>
    </p>       
    
    <div class="div_onglets">
    <div id="onglet_1" class="onglet">
      <p>
       Chien ou chat ?
      </p>
   
   <section class="boutique">
    <p>
      <button class="btnmateriel" id="btn_3" data-onglet="3" >Chien</button>
      <button class="btnmateriel" id="btn_4" data-onglet="4" >Chat</button>
    </p>  

   <div id="onglet_3" class="onglet">
      <p>
       Texte 2
      </p>
   </div>
 
   <div id="onglet_4" class="onglet">
      <p>
       Texte 3
      </p>
   </div>
        </section>
    </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>

EDIT : Ajout du LANGAGE dans les balises de code (la coloration syntaxique).

Explications disponibles ici :ICI

Merci d'y penser dans tes prochains messages.
Jordane45

A voir également:

Apparition de texte avec boutons
Excel cellule couleur si condition texte - Guide
Transcription audio en texte word gratuit - Guide
Comment réinitialiser un téléphone avec les boutons - Guide
Convertisseur récupération de texte - Guide
Mettre un texte en majuscule - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38369 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 3 janvier 2025 4 722
5 déc. 2017 à 00:49

Bonjour,

Et quelle est la question ?
Le code ne présente aucune erreur.....

Discussions similaires

adele

copie de texte

[Excel] Recherche de Texte avec RechercheV

Excel si cellule contient texte alors...

Message de donation