Menu
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?
258
asked Sep 07 '25 06:09
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();
}
});
});
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.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
