Question

146

jQuery show/hide not working

rated 0 times [ 147] [ 1] / answers: 1 / hits: 131579 / 10 Years ago, sun, april 20, 2014, 12:00:00

I have a basic html page with some JS and 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=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>

A click on the div with the class expand does nothing...
I also have tried to copy/paste an example code from jQuery website but it also didn't work.
Can anyone help me with this problem?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

finn

Add To Favorites

Follow

Total Points: 154

Total Questions: 88

Total Answers: 82

Location: Lithuania

Member since Mon, Nov 16, 2020

4 Years ago

answered 10 Years ago trinityr · Accepted Answer

Just add the document ready function, this way it waits until the DOM has been loaded, also by using the :visible pseudo you can write a simple show and hide function.

Sample

 $(document).ready(function(){



    $( '.expand' ).click(function() {

         if($( '.img_display_content' ).is(:visible)){

              $( '.img_display_content' ).hide();

         } else{

              $( '.img_display_content' ).show();

         }



    });

});