title: How to make AJAX content load smoothly while sliding Div?
body: <p>I am having trouble getting my div to slide smoothly upon the "View Activity" text being clicked. What I wish to achieve is this:</p>
  
  <ul>
  <li>When the "View Activity" link is clicked, I want the div to slide open smoothly</li>
  <li>Once full open, the div should display "Loading..." until the content is fully loaded</li>
  <li>Once the content is fully loaded, it should replace the "Loading..." text inside the div</li>
  </ul>
  
  <p>What really happens</p>
  
  <ul>
  <li>When the "View Activity" link is clicked, the div suddenly opens and then instantly closes</li>
  <li>If I click the link once more it slides open normally and slides closed smoothly when clicked again</li>
  </ul>
  
  <p>How do I make it slide open smoothly the first time and load the content smoothly while this happens? I suspect this has something to do with the content of div being changed while sliding, but I have no idea how to fix it.</p>
  
  <p><em><strong>HTML</em></strong></p>
  
  <pre><code>&lt;div class="listing_activity_container"&gt;
     &lt;span style="cursor: pointer;" class="listing_activity_link &lt;?php echo $listing-&gt;listing_id ?&gt;"&gt;View Activity&lt;/span&gt;
     &lt;div class="activityContent_&lt;?php echo $listing-&gt;listing_id ?&gt;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><em><strong>JQUERY</em></strong></p>
  
  <pre><code>&lt;script&gt;
  
      $(document).ready(function(){
         $(".listing_activity_link").click(function()   {
              var listing_id = $(this).attr('class').split(' ')[1]
              var url = "&lt;?php echo site_url('AJAX/ajax_default/listing_activity_seller'); ?&gt;";
  
              $(".activityContent_"+listing_id).slideToggle();
              $(".activityContent_"+listing_id).html('Loading...');
              $.post(url, {listing_id: listing_id} ,function(data) {
                 $(".activityContent_"+listing_id).html(data);
              });
         });   
      });
  
  &lt;/script&gt;
  </code></pre>