comment faire un afficher/masquer le bouton à bascule avec jquery

Salut j'ai essayé de faire un afficher/masquer le bouton à bascule avec jquery mais je ne peux trouver les boutons pour afficher une div mais rien que de le cacher

ci-dessous est l'un des exemples que j'ai trouvé qui montre une div, mais il ne les laissez pas vous le cacher, sauf si vous cliquez sur un autre bouton. Je voudrais être en mesure d'utiliser le même bouton pour afficher et masquer un div. J'ai plusieurs divs sur ma page et que vous souhaitez être en mesure d'utiliser jquery au lieu de javascript.

<html>
 <head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document).ready(function(){

        $(".buttons").click(function () {
        var divname= this.value;
          $("#"+divname).show("slow").siblings().hide("slow");
        });

      });
</script> 
     </head>
        <body>


 <div id="buttonsDiv"> 

  <input type="button" id="button1" class="buttons" value="div1"></input>
  <input type="button" id="button2" class="buttons" value="div2"></input>
  <input type="button" id="button3" class="buttons" value="div3"></input>
  <input type="button" id="button4" class="buttons" value="div4"></input>

  </div>

   <div>

     <div id="div1" style="display:none">
    Hello World
     </div>

     <div id="div2" style="display:none">
       Test
   </div>

        <div id="div3" style="display:none">
          Another Test
  </div>

     <div id="div4" style="display:none">
     Final Test
     </div>


         </div>


     </body>
    </html>
InformationsquelleAutor billy | 2011-08-17
  1. 5

    Essayer cette

    $(".buttons").click(function () {
  var divname= this.value;
  $("#"+divname).slideToggle().siblings().hide("slow");
});
    • merci c'est ce que je cherchais
    • kool, marquez-le comme une réponse à chaque fois que vous le pouvez, merci.
    InformationsquelleAutor ShankarSangoli
  2. 4

    Même plus simple de contrôler l'utilisation de la propre fonction de bascule.

    $('.toggleButtons').click(function()
{
    $('control1, control2, ...').toggle();
});
    • La zone? Qu'est-ce que?
    • quel que soit le domaine que vous essayez de cacher/montrer
    • aurais-je avoir une bascule de la méthode pour chaque bouton? depuis la div nom serait contrôlée serait différent
    • pour chaque bouton, je pense que oui, mais si vous voulez de multiples domaines à être affichée/masquée par un seul bouton, puis de séparer puis avec la virgule, le code mis à jour.
    InformationsquelleAutor atoMerz
  3. 1

    Démo

    $(document).ready(function(){
    $(".buttons").click(function () {
    var div= $("#"+this.value);
          div.toggle("slow").siblings().hide("slow");
    });
});

    Cela devrait le faire.

    EDIT:

    de crédit pour basculer va à @AtoMerZ. Il avait d'abord.

    InformationsquelleAutor Joseph Marikle
  4. 1

    Passer votre script avec ceci:

    <script>
    $(document).ready(function(){
        $(".buttons").click(function () {
           $("#buttonsDiv div").hide()
          var divname= this.value;
          $("#"+divname).show();
        });
    });
</script>
    • Le toggle() ne doit pas être appliquée à l' $(this) mais à la div liées à l'cliqué sur le bouton.
    • Mon erreur... corrigé...
    • Qu'est-ce que $("#buttonsDiv").child() va donner?
    • Mon erreur, encore une fois, j'ai corrigé...
    InformationsquelleAutor Nayish
  5. 0

    C'est un joli script simple à faire:

    $('.buttons').click(function()
{
    var elementToShowOrHide = $('#' + $(this).val());

    if(elementToShowOrHide.is(':visible'))
       elementToShowOrHide.hide();
    else
       elementToShowOrHide.show();
});

    Chaque clic sur le bouton puis activer /désactiver la visibilité de l'autre élément.

    • découvrez .toggle() permettrait de simplifier votre code beaucoup.
    InformationsquelleAutor Tejs
  6. 0

    Le jQuery .toggle() la méthode devrait vous aider:

    $(".buttons").click(function () {
  var divname= this.value;
  $("#"+divname).toggle();
});

    Source: http://api.jquery.com/toggle/

    InformationsquelleAutor red
  7. 0

    Vous pouvez utiliser le toggle méthode pour afficher et masquer un élément. Cela permettra d'afficher/de masquer chaque div individuellement:

    $(".buttons").click(function () {
  $("#" + this.value).toggle("slow");
});
    InformationsquelleAutor Guffa
  8. 0

    En supposant que vous voulez tous les autres divs à être masqué lorsque la nouvelle est indiqué:

    $('.buttons').click(
    function() {
        $('div > div').hide();
        $('div > div').eq($(this).index()).show();
    });

    JS Fiddle démo.

    InformationsquelleAutor David Thomas