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

Question

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

Demandé el 27 de Décembre, 2011: Quand la question a-t-elle été
70578 affichage: Nombre de visites la question a
3 Réponses: Nombre de réponses aux questions
Ouvert: Situation réelle de la question

J'ai un code qui affiche trois images et un div respectif sous chaque image. En utilisant la fonction jquery .toggle, j'ai fait en sorte que chaque div bascule lorsque l'on clique sur l'image au-dessus. Existe-t-il un moyen de faire en sorte que les divs commencent comme masqués ?

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>

Demandé el 27 de Décembre, 2011 par John

Answer 1

3 Réponses

Answer 2

7voto

George Mauer Points 22685

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();
})

Au fait, plutôt que d'utiliser des sélecteurs d'identifiants, vous devriez probablement utiliser des classes

Répondu el 27 de Décembre, 2011 par George Mauer (22685 Points )

Answer 3

3voto

Deepan Saravanan Points 31

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

Lorsque le jQuery bascule le bloc, le style sera alors changé en bloc

Répondu el 20 de Août, 2016 par Deepan Saravanan (31 Points )

Answer 4

0voto

Ranjith Kumar Points 1

<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>

Répondu el 10 de Novembre, 2018 par Ranjith Kumar (1 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: