Sujet Précédent Sujet Suivant

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

Fermé
nicho - 31 oct. 2020 à 01:30
jordane45 Messages postés 38175 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 mai 2024 - 31 oct. 2020 à 15:37
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 38175 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 mai 2024 4 667
31 oct. 2020 à 10:58
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 38175 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 mai 2024 4 667
31 oct. 2020 à 14:48 

<!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
31 oct. 2020 à 14:32
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
31 oct. 2020 à 15:02
sa marche mais au début on perçois les deux
0
jordane45 Messages postés 38175 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 mai 2024 4 667
31 oct. 2020 à 15:37
Tu as bien repris également le style CSS ... ?
0

Discussions similaires

programme qui n'affiche pas le mot secret
EMy.chev -
yg_be -

3 réponses
créer une adresse gmail pour une autre personne
Emma33000 -
Emma33000 -

2 réponses
Trouver le mot réellement écrit en lettres capitales PIX
ETHAN -
kirikou -

4 réponses