I'm new at JQuery and I have a bit of an OCD issue.
I'm using SlideToggle with click function to hide/show a container div. However the div inside of it doesn't slide with it, it just appears.
Is there a way I can get both DIV's to slide in together?
JQUERY:
<script type="text/javascript"&g开发者_JS百科t;
$(document).ready(function(){
$("#store_container").hide();
$('#toggle').click(function(){
$('#store_container').slideToggle("slow");
return false;
});
});
</script>
HTML:
<div id="store_container" style="display:none;">
<div id="store_data">
<p>THIS IS A TEST</p>
</div>
</div>
Try this:
<script type="text/javascript">
$(function(){
$("#store_container").hide();
$('#toggle').toggle(function(){
$('#store_container').slideDown("slow", function() { $('#store_data').fadeIn(); });
}, function() {
$('#store_data').fadeOut("fast", function() { $('#store_container').slideUp("slow"); });
});
});
</script>
<div id="store_container" style="display:none; height: 300px;">
<div id="store_data" style="display:none;">
<p>THIS IS A TEST</p>
</div>
</div>
精彩评论