Combining multiple event functions jQuery
<p>Forgive me not-so advanced approach but I'm looking for the best method to combine multiple functions into one.  Here's my code.  Basically, I have 6 steps one one page that request 6 different Ajax calls.  The problem is, oddly, they work when you start from the bottom of the page and work up, but starting from the top of the page going down, the event doesn't work.  any suggestions?  Thanks! </p>

<p>The html:</p>

<pre><code> &lt;!--   Expanding Block 1     --&gt;
&lt;div class="row span10 center clearfix"&gt;  &lt;a href="http://diyshedsupply.com/step-1-tab/"  class="show_hide btn btn-primary pull-right"&gt;+ -&lt;/a&gt;&lt;div class="pull-right"&gt; &lt;strong&gt; Specs and Details &amp;nbsp; &lt;/strong&gt;&lt;/div&gt;&lt;br /&gt;
&lt;/div&gt;
&lt;div class="row span10 center slidingDiv"&gt;

&lt;div class="row span9 center clearfix"&gt;

&lt;div id="ajax-content"&gt;Default Content&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;!--   Expanding Block      --&gt;   

 &lt;!--   Expanding Block  2     --&gt;
&lt;div class="row span10 center clearfix"&gt;  &lt;a href="http://diyshedsupply.com/step-2-tab/"  class="show_hide2 btn btn-primary pull-right"&gt;+ -&lt;/a&gt;&lt;div class="pull-right"&gt; &lt;strong&gt; Specs and Details &amp;nbsp; &lt;/strong&gt;&lt;/div&gt;&lt;br /&gt;
&lt;/div&gt;
&lt;div class="row span10 center slidingDiv2"&gt;

&lt;div class="row span9 center clearfix"&gt;

&lt;div id="ajax-content2"&gt;Default Content&lt;/div&gt;

&lt;/div&gt;
&lt;/div&gt;
&lt;!--   Expanding Block      --&gt; 

ect...
</code></pre>

<p>The JavaScript:</p>

<pre><code>// Load Ajax Content Step 1 //


     $('.slidingDiv').hide();
     $('.show_hide').show();
     $('.show_hide').click(function () {
         $('.slidingDiv').slideToggle(1600, function () {
             $('.show_hide').addClass('close-tabs');
             /* do anything after animation is complete */
             $('ul.tabs').each(function (e) {
                 var $active, $content, $links = $(this).find('a');
                 // If the location.hash matches one of the links, use that as the active tab.
                 // If no match is found, use the first link as the initial active tab.
                 $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
                 $active.addClass('active1');
                 $content = $($active.attr('href'));
                 // Hide the remaining content
                 $links.not($active).each(function () {
                     $($(this).attr('href')).hide();
                 });
                 // Bind the click event handler
                 $(this).on('click', 'a', function (e) {
                     // Make the old tab inactive.
                     $active.removeClass('active1');
                     $content.hide();
                     // Update the variables with the new link and content
                     $active = $(this);
                     $content = $($(this).attr('href'));
                     // Make the tab active.
                     $active.addClass('active1');
                     $content.show();
                     // Prevent the anchor's default click action
                     e.preventDefault();
                 });
             });
         });
         $('#ajax-content').empty().append("&lt;div class='loading'&gt;&lt;img src='/wp-content/themes/diy/img/ajax-loader.gif' alt='Loading' /&gt;&lt;/div&gt;");
         $('.show_hide a').removeClass('current');
         $(this).addClass('current');
         $.ajax({
             url: this.href,
             success: function (html) {
                 $("#ajax-content").empty().append(html);
             }
         });
         return false;
     });


// Load Ajax Content Step 2 //

     $('.slidingDiv2').hide();
     $('.show_hide2').show();
     $('.show_hide2').click(function () {
         $('.slidingDiv2').slideToggle(1600, function () {
             $('.show_hide2').addClass('close-tabs');
             /* do anything after animation is complete */
             $('ul.tabs2').each(function (e) {
                 var $active, $content, $links = $(this).find('a');
                 // If the location.hash matches one of the links, use that as the active tab.
                 // If no match is found, use the first link as the initial active tab.
                 $active = $($links.filter('[href="' + location.hash + '"]')[0] || $links[0]);
                 $active.addClass('active2');
                 $content = $($active.attr('href'));
                 // Hide the remaining content
                 $links.not($active).each(function () {
                     $($(this).attr('href')).hide();
                 });
                 // Bind the click event handler
                 $(this).on('click', 'a', function (e) {
                     // Make the old tab inactive.
                     $active.removeClass('active2');
                     $content.hide();
                     // Update the variables with the new link and content
                     $active = $(this);
                     $content = $($(this).attr('href'));
                     // Make the tab active.
                     $active.addClass('active2');
                     $content.show();
                     // Prevent the anchor's default click action
                     e.preventDefault();
                 });
             });
         });
         $('#ajax-content2').empty().append("&lt;div class='loading'&gt;&lt;img src='/wp-content/themes/diy/img/ajax-loader.gif' alt='Loading' /&gt;&lt;/div&gt;");
         $('.show_hide2 a').removeClass('current');
         $(this).addClass('current');
         $.ajax({
             url: this.href,
             success: function (html) {
                 $("#ajax-content2").empty().append(html);
             }
         });
         return false;
     });
</code></pre>
