JQuery - SlideToggle Multiple DIVs at the same time?

Question

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>

Answer 1

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>