I have a basic html page with some JS and CSS:
$('.expand').click(function() {_x000D_
$('.img_display_content').show();_x000D_
});@charset "utf-8";_x000D_
_x000D_
/* CSS Document */_x000D_
_x000D_
.wrap {_x000D_
margin-left: auto;_x000D_
margin-right: auto;_x000D_
width: 40%;_x000D_
}_x000D_
_x000D_
.img_display_header {_x000D_
height: 20px;_x000D_
background-color: #CCC;_x000D_
display: block;_x000D_
border: #333 solid 1px;_x000D_
margin-bottom: 2px;_x000D_
}_x000D_
_x000D_
.expand {_x000D_
float: right;_x000D_
height: 100%;_x000D_
padding-right: 5px;_x000D_
cursor: pointer;_x000D_
}_x000D_
_x000D_
.img_display_content {_x000D_
width: 100%;_x000D_
height: 100px;_x000D_
background-color: #0F3;_x000D_
margin-top: -2px;_x000D_
display: none;_x000D_
}<html>_x000D_
_x000D_
<head>_x000D_
<link href="beta.css" rel="stylesheet" type="text/css" />_x000D_
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
<div class="wrap">_x000D_
<div class="img_display_header">_x000D_
<div class="expand">+</div>_x000D_
</div>_x000D_
<div class="img_display_content"></div>_x000D_
</div>_x000D_
</div>_x000D_
</body>_x000D_
_x000D_
</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?
This question is related to
javascript
jquery
html
css
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.
$(document).ready(function(){
$( '.expand' ).click(function() {
if($( '.img_display_content' ).is(":visible")){
$( '.img_display_content' ).hide();
} else{
$( '.img_display_content' ).show();
}
});
});
Demo
$( '.expand' ).click(function() {_x000D_
$( '.img_display_content' ).toggle();_x000D_
});.wrap {_x000D_
margin-left:auto;_x000D_
margin-right:auto;_x000D_
width:40%;_x000D_
}_x000D_
_x000D_
.img_display_header {_x000D_
height:20px;_x000D_
background-color:#CCC;_x000D_
display:block;_x000D_
border:#333 solid 1px;_x000D_
margin-bottom: 2px;_x000D_
}_x000D_
_x000D_
.expand {_x000D_
float:right;_x000D_
height: 100%;_x000D_
padding-right:5px;_x000D_
cursor:pointer;_x000D_
}_x000D_
_x000D_
.img_display_content {_x000D_
width: 100%;_x000D_
height:100px; _x000D_
background-color:#0F3;_x000D_
margin-top: -2px;_x000D_
display:none;_x000D_
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div class="wrap">_x000D_
<div class="img_display_header">_x000D_
<div class="expand">+</div>_x000D_
</div>_x000D_
<div class="img_display_content"></div>_x000D_
</div>_x000D_
</div>http://api.jquery.com/toggle/
"Display or hide the matched elements."
This is much shorter in code than using show() and hide() methods.
if (grid.selectedKeyNames().length > 0) {
$('#btnRemoveFromList').show();
} else {
$('#btnRemoveFromList').hide();
}
}
() - calls the method
no parentheses - returns the property
Use this
<script>
$(document).ready(function(){
$( '.expand' ).click(function() {
$( '.img_display_content' ).show();
});
});
</script>
Event assigning always after Document Object Model loaded
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.
Source: Stackoverflow.com