title: Sliding multiple divs left to right with jquery toggle
body: <p>I am trying to toggle multiple divs left to right when A link is clicked. </p>
  
  <p>Within each div is a slideshow and some content. So far I can toggle between my links but when I get to the second div my content should appear but it doesnt. I have a display:none set in my css because when the page loads I only want the first item to be displayed and then when the user clicks on any other links the content for that section will appear.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="span2"&gt;
              &lt;div class="product-links" data-target=".ps1"&gt;
                  &lt;a href=""&gt;ps1&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="span2"&gt;
              &lt;div class="product-links" data-target=".ps2"&gt;
                  &lt;a href=""&gt;ps2&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="span2"&gt;
              &lt;div class="product-links" data-target=".ps3"&gt;
                  &lt;a href=""&gt;ts1&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>HTML for divs that toggle:</p>
  
  <pre><code>&lt;div class="container"&gt;
          &lt;div class="row toggle-prod ps1"&gt;
              &lt;div class="span7"&gt;
                  &lt;div class="royalSlider-ps1"&gt;
                      &lt;img class="rsImg" src="" /&gt;
                      &lt;img class="rsImg" src="" /&gt;
                      &lt;img class="rsImg" src="" /&gt;
                      &lt;img class="rsImg" src="" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="span5"&gt;
                  &lt;p&gt;Item 1&lt;/p&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;div class="container"&gt;
          &lt;div class="row toggle-prod ps2"&gt;
              &lt;div class="span7"&gt;
                  &lt;div class="royalSlider-ps2"&gt;
                      &lt;img class="rsImg" src="" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="span5"&gt;
                  &lt;p&gt;item2&lt;/p&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The javascript:</p>
  
  <pre><code>$(document).ready(function() {
  
  $(".product-links a").click(function(){
      var divToToggle2 = $( $(this).data('target') );
      $(".toggle-prod:visible").not(divToToggle2).hide();
      divToToggle2.fadeToggle("fast", "linear");
      return false;
    });
  
  
  });
  </code></pre>