views:

362

answers:

1

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">
$(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>
+1  A: 

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>  
Nick Craver
This didn't work and once the #store_container slid out, #store_data basically disappeared. Very odd.
iamtheratio
This actually kept #store_data from disappearing..<script type="text/javascript">$(function(){ $('#store_container, #store_data').hide(); $('#toggle').click(function(){ $('#store_container, #store_data').slideToggle("slow"); return false; });});</script>But it still didn't let both DIVS slide down together, only one..
iamtheratio
@iamtheratio - Updated, though your original sample works for me in FireFox....try my current answer.
Nick Craver
@iamtheratio - Which browser are you using? I'm seeing both slidedown with your original code here...need to see the effect you are.
Nick Craver
@nick this works without error, but the odd part is once I click #toggle the #store_data instantly appears, then #store_container slides down.. Which is awful looking.
iamtheratio
@iamtheratio - Try the above, a bit fancier, it'll slidedown (seems you have a specified height in your page, so you can use this) then fade in the inner contents after the slide...same reverse the other way.
Nick Craver
Thank you so much, I'm trying to figure this crap out, but I want everything to be perfect. haha.Thanks again!
iamtheratio