Créer un bouton radio qui en affiche seulement un a la fois

nicho -  
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   -
Bonjour,
je suis débutant en web et je suis entrain de concevoir un site mais j'ai de la misère a créer un bouton radio que lorsqu'il est sélectionner on peut voir son texte mais dès que l'ont clique sur l'autre bouton je voudrais que le premier disparaisse et que l'autre apparaisse a sa place (je ne veut pas que les deux texte sois affiché en même temps merci de votre aide !!)


Configuration: Windows / Chrome 86.0.4240.111
A voir également:

4 réponses

Réponse 1 / 4
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour,

Sans voir ton code html actuel... difficile de te répondre.
Mais en essayant de décrypter ce que tu as écris...je pense que tu devras utiliser le javascript.

NB: Pour nous montrer ton code, tu devras utiliser les BALISES DE CODE.
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
1
Réponse 2 / 4
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
  

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">    
<style>
    .divtxt {
      display:none;
    }
</style>
</head>
<body>
	<button  name="btn1" type="radio" data-toggle="collapse" data-target="test"
   aria-expanded="false" >
    <i id="fontawesomecolor" class="fas fa-align-justify"></i>
  </button>
  <div id="test"  class="divtxt">allo</div>
  <button name="btn1" type="radio" data-toggle="collapse" data-target="test2"
   aria-expanded="false" >
    <i id="fontawesomecolor" class="fas fa-align-justify"></i>
  </button>
  <div id="test2" class="divtxt" >bonjour</div>
   
  <script>
   

  
  function affichechoix(elmChoix){
  //on masque tous les éléments ayant la class .divtxt
    divcache = document.querySelectorAll('.divtxt');
    for (let i=0; i< divcache.length; i++){
      divcache[i].style.display = 'none';
      
    }
    //on affiche l'element voulu
    elmChoix.style.display = 'block';
  }
  
   document.querySelectorAll("button").forEach(v=>{
      
      v.addEventListener("click",()=>{
      
        var idCible = v.getAttribute('data-target');
      console.log('idCible',idCible);
       var elm = document.getElementById(idCible);
       console.log('element a afficher',elm);
       affichechoix(elm);
    });
  })
   
  </script>
 
</body>
</html>

1
Réponse 3 / 4
nicho
 
Désoler j'aurais du y penser avant donc mon code est celui si 





<button  name="btn1" type="radio" data-toggle="collapse" data-target="#test"
 aria-expanded="false" >
<i id="fontawesomecolor" class="fas fa-align-justify"></i>
</button>
<div id="test">allo</div>
<button name="btn1" type="radio" data-toggle="collapse" data-target="#test2"
 aria-expanded="false" >
<i id="fontawesomecolor" class="fas fa-align-justify"></i>
</button>
<div id="test2">bonjour</div>



je veut donc que lorsque je clique sur un bouton que le texte de l'autre disparaisse et non reste
en bref.
il y a deux boutton
je clique sur le btn1 le texte attribué s'affiche et lorsque je clique sur le btn2 le texte du btn1 disparait pour lesser place au texte du btn 2(Voila le résulta souhaiter merci de votre )
0
Réponse 4 / 4
nicho
 
sa marche mais au début on perçois les deux
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Tu as bien repris également le style CSS ... ?
0