J'essaie de créer un div qui affichera son contenu si la largeur maximale de l'écran: 480px est.

Mais lorsque je redimensionne la fenêtre, elle apparaît même si l'utilisateur ne clique pas sur le bouton de déclenchement. Comment pourrais-je masquer une balise div spécifique au début, au moins jusqu'à ce que l'utilisateur clique dessus? Cela pourrait-il être fait avec jquery ou CSS?

$(document).ready(function() {
  $(".slide-toggle").click(function() {
    $(".box").slideToggle();
  });
});
@media only screen and (max-width: 480px) {
  .box {
    display: block;
  }
  .box-inner {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
  }
  .slide-toggle {
    display: block;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="slide-toggle">Slide Toggle</button>
<hr>
<div class="box">
  <div class="box-inner">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</p>
  </div>
</div>
0
DaF-Student 20 avril 2017 à 17:28

3 réponses

Meilleure réponse

Vous pouvez réaliser ce que vous voulez sans ajouter de jquery supplémentaire, seulement css

Voir l'extrait:

$(document).ready(function() {
  $(".slide-toggle").click(function() {
    $(".box").slideToggle();
  });
});
.slide-toggle {
  display: none;
}

@media only screen and (max-width: 480px) {
  .box-inner {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
  }
  .box {
    display: none;
  }
  .slide-toggle {
    display: block;
  }
}

@media only screen and (min-width: 481px) {
  .box {
    display: block!important;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="slide-toggle">Slide Toggle</button>
<hr>
<div class="box">
  <div class="box-inner">
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</p>
  </div>
</div>
0
Chiller 20 avril 2017 à 14:47

Faites-le une fois votre document prêt

$(".box").hide(); 

Et sur l'événement de clic, il vous suffit de le montrer à nouveau:

$(".box").show();
0
Kris J. 20 avril 2017 à 14:33

C'est comme ça que je le fais habituellement.

Cachez l'élément initialement avec CSS:

#div_selector { display:none; } 

Ensuite, affichez-le avec jquery au clic

$('#click_element').on('click', function(){ 
      $('#div_selector').show()

      //alternatively, you can do this to show/hide toggle on click
      $('#div_selector').toggle('show')          
 });
1
rob 20 avril 2017 à 14:37