18043 sujets

Questions générales et questions de débutants

[Résolu] Afficher/cacher avec un Bouton [Javascript]

Bonjour,

Je débute en Javascript (et en développement tous court d'ailleurs...), et je rencontre un soucis dans le développement de boutons.
En effet, je souhaite réaliser une liste de boutons qui permettraient d'afficher au clique certains éléments (placer dans des divs distinctes). Chaque activation d'un bouton rendrait le bouton précédemment cliquer inactif permettant ainsi de n'afficher que les informations relatives au bouton cliquer.

J'ai réaliser un script (ci-dessous), mais celui-ci ne marche pas comme il faudrait. En effet:
1- Les boutons sont de bases tous actifs... Au chargement de la page, tous les éléments sont affichés les uns en dessous des autres. Il faut préalablement cliquer sur les boutons pour les cacher.
2- L'activation d'un bouton ne désactive pas les autres... (les éléments s'affichent donc en dessous des autres au clique, à moins de clique sur le boutons pour le désactiver)

Pour le premier problème j'ai tenter d'inverser les attribut java "show" et "hide" mais rien n'y fait... le même comportement s'opère...
Pour le second je ne trouve pas quoi ni comment introduire cette notion dans mon JAVA... Smiley confus

Voilà mes codes :
 <li><button id="bt-contact" type="button" class="btn btn-group-lg"onclick="Show_mail(contact_mail)"><i class="fa fa-envelope text-center"></i></button></li>

<div id="contact_mail" class="type text-center" style="display: none>
                   		<div class="col-sm-6 col-md-3 col-lg-3">
                   			Lorem ipsum
                    	</div>
                    </div>


        function Show_mail(contact_mail) {
            if (false == $(contact_mail).is(':visible')) {
                $(contact_mail).show(250);
            }
            else {
                $(contact_mail).hide(250);
            }
        }



Auriez-vous quelques conseils ou solutions à me donner ?

Je vous remercie d'avance pour vos réponses Smiley smile
Bonne soirée (ou journée, c'est selon Smiley cligne )
Modifié par Myly (08 Oct 2015 - 23:31)
Bonjour,

Petite confusion, en effet
C'est visibility qui est visible ou hide
Pour display c'est inline ou block pour rendre visible alignés ou l'un en dessous de l'autre !
Administrateur
Je ne suis pas un puriste, mais attention "Java" même si c'est un raccourci d'écriture n'a rien à voir avec "JavaScript" Smiley cligne

Suggestion de solution :

<button id="bt-contact" type="button" class="btn btn-group-lg" data-target="#contact-mail"><i class="fa fa-envelope text-center"></i> Contact mail</button>

<button id="bt-autre" type="button" class="btn btn-group-lg" data-target="#autre"><i class="fa fa-envelope text-center"></i> Autre bouton</button>

<div id="contact-mail" class="tohide">Contact mail</div>
<div id="autre" class="tohide">Autre bloc</div>


$(".tohide").hide();
$(".btn-group-lg").on("click", function() {
   var target = $(this).data("target");
   if(target!==undefined) $(target).toggle();
});


On peut améliorer en ajoutant un état actif/inactif sur le bouton

$(".tohide").hide();
$(".btn-group-lg").on("click", function() {
  var target = $(this).data("target");
  if(target!==undefined) {
    $(target).toggle();
      $(this).toggleClass("active",$(target).is(":visible"));
  }
});


Le tout en démo live : http://codepen.io/anon/pen/RWGxZd
Impeccable ! Un grand GRAND merci ! ça marche Smiley smile

Juste encore une question,quels sont les attributs Javascript pour donner au bouton le comportement suivant : lorsqu'on clique sur un bouton, tous les autres se désactivent (rendant leurs "div" invisible?) ?

J'ai tenter de rajouter en html les élément ( value="button 2" disabled="disabled" ) à mes boutons et en ajoutant dans mon script Javascript ceci :
$(function(){
    $("#bt1").click(function(){
        $(this).attr("disabled", "disabled");
        $("#bt2").removeAttr("disabled");
    });


Seulement, ça ne fait que casser tous le reste... Auriez-vous une idée ?
Merci d'avance Smiley smile
Sujet clos
Aller à