J’ai une page HTML de base avec du JS et du CSS:

$('.expand').click(function() {
  $('.img_display_content').show();
});
@charset "utf-8";

/* CSS Document */

.wrap {
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

.img_display_header {
  height: 20px;
  background-color: #CCC;
  display: block;
  border: #333 solid 1px;
  margin-bottom: 2px;
}

.expand {
  float: right;
  height: 100%;
  padding-right: 5px;
  cursor: pointer;
}

.img_display_content {
  width: 100%;
  height: 100px;
  background-color: #0F3;
  margin-top: -2px;
  display: none;
}
<html>

<head>
  <link href="https://stackoverflow.com/questions/23187626/beta.css" rel="stylesheet" type="text/css" />
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
</head>

<body>
  <div class="wrap">
    <div class="img_display_header">
      <div class="expand">+</div>
    </div>
    <div class="img_display_content"></div>
  </div>
  </div>
</body>

</html>

Un clic sur le div avec la classe expand peu importe … j’ai également essayé de copier / coller un exemple de code du site Web jQuery mais cela n’a pas fonctionné non plus. Quelqu’un peut-il m’aider avec ce problème?

3

Ajoutez simplement la fonction de préparation du document et attendez que de cette façon ÉVALUATION a été chargé, également avec le :visible Pseudo, vous pouvez écrire une fonction simple pour faire un fondu entrant et sortant.

goûter

 $(document).ready(function(){

    $( '.expand' ).click(function() {
         if($( '.img_display_content' ).is(":visible")){
              $( '.img_display_content' ).hide();
         } else{
              $( '.img_display_content' ).show();
         }

    });
});

0