web-dev-qa-db-fra.com

Comment démarrer mes bascules jquery comme cachées?

J'ai un code qui affiche trois images et une div respective sous chaque image. En utilisant la fonction jquery .toggle, je l'ai fait pour que chaque div bascule lorsque l'image au-dessus est cliquée. Existe-t-il un moyen de faire en sorte que les divs commencent comme cachées?

Merci pour votre temps,

CODE DE RÉFÉRENCE:

    <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#picOne").click(function(){
$("#one").toggle(250);


 });

$("#picTwo").click(function(){
    $("#two").toggle(250);
  });


  $("#picThree").click(function(){
    $("#three").toggle(250);
  });

});
</script>
</head>

<body>


    <center>
    <h2>Smooth Transitions</h2>


    <img src="one.png" id="picOne">
        <div id="one">
        <p>first paragraph.</p>
        </div>

    <img src="two.png" id="picTwo">

        <div id="two" visibility="hidden">
        <p>Second Pair of giraffe.</p>
        </div>


    <img src="three.png" id="picThree">

        <div id="three">
        <p>Thiird paragraph.</p>
        </div>



</center>
</body>
</html>
javascriptjqueryhtmltoggle
43
John

visibility est une propriété css. Mais l'affichage est ce que vous voulez en tout cas

<div id="two" style="display:none;">
  <p>Second Pair of giraffe.</p>
</div>

Ou abandonnez le CSS en ligne et donnez à chaque div à basculer une classe CSS

<div id="two" class="initiallyHidden">

et alors

.initiallyHidden { display: none; }

Et vous pouvez également nettoyer un peu votre jQuery. Donnez à vos images à bascule une classe CSS

    <img src="one.png" class="toggler">
    <div>
    <p>first paragraph.</p>
    </div>

Et alors

$("img.toggler").click(function(){
    $(this).next().toggle(250);
});

Cela éliminerait votre besoin de tous ces identifiants et rendrait également cette solution beaucoup, beaucoup plus extensible.

Et pour gérer le contenu ajouté dynamiquement, vous pouvez utiliser on au lieu de click

$(document).on("click", "img.toggler", function(){
    $(this).next().toggle(250);
});

(et pour de meilleures performances, assurez-vous que toutes ces images à bascule sont dans une div de conteneur, nommée, disons, containerFoo, puis faites $("#containerFoo").on au lieu de $(document).on(

63
Adam Rackis

Avec css:

#one, #two, #three { display: none; }

Avec jQuery

$(function() {  //once the document is ready
  $('h2').nextAll('img') //select all imgs following the h2
    .find('div')  //select all contained divs
    .hide();
})

Soit dit en passant, plutôt que d'utiliser des sélecteurs d'id, vous devriez probablement utiliser des classes

7
George Mauer

Ajoutez simplement style="display: none;" à la div. Cela démarrera la classe div comme masquée.

Lorsque jQuery bascule le bloc, le style sera alors changé pour bloquer

3
Deepan Saravanan
<style>
.reply {
    display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("form").toggle();
    });
});
</script>
</head>
<body>

<button>Toggle between hiding and showing the paragraphs</button>

<form action="#" class="row m0 comment_form reply" >
  <h5>post your comment:</h5>
  <textarea class="form-control"></textarea>
  <input type="submit" value="submitnow" class="btn btn default">
  </form>
0
Ranjith Kumar