CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Andras Mohacsi
Andras Mohacsi

Reputation: 293

jQuery show/hide not working

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?

Upvotes: 28

Views: 138141

Answers (6)

Post Impatica
Post Impatica

Reputation: 16463

In my case it wasn't working because the containing div I was trying to hide had Bootstrap flex properties applied inline in the html. Once I moved everything into a parent div without any bootstrap classes, now hide works.

Upvotes: 4

Nithya
Nithya

Reputation: 17

if (grid.selectedKeyNames().length > 0) {
            $('#btnRemoveFromList').show();
        } else {
            $('#btnRemoveFromList').hide();
        }

}

() - calls the method

no parentheses - returns the property

Upvotes: 0

JohanVdR
JohanVdR

Reputation: 2878

Demo 

$( '.expand' ).click(function() {
  $( '.img_display_content' ).toggle();
});
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="img_display_header">
<div class="expand">+</div>
</div>
<div class="img_display_content"></div>
</div>
</div>

http://api.jquery.com/toggle/
"Display or hide the matched elements."

This is much shorter in code than using show() and hide() methods.

Upvotes: 5

Victory
Victory

Reputation: 5890

The content is not ready yet, you can move your js to the end of the file or do

<script>
$(function () { 
    $( '.expand' ).click(function() {
       $( '.img_display_content' ).show();
    });
});

So that the document waits to be loaded before running.

Upvotes: 2

dbucki
dbucki

Reputation: 454

Use this

<script>
$(document).ready(function(){
    $( '.expand' ).click(function() {
        $( '.img_display_content' ).show();
    });
});
</script>

Event assigning always after Document Object Model loaded

Upvotes: 3

Jorge Y. C. Rodriguez
Jorge Y. C. Rodriguez

Reputation: 3449

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

    });
});

Upvotes: 14

Related Questions