title: How to control what divs jQuery slideToggle pushes down
body: <p>I am new to writing jQuery and have a question related to the slideToggle function. I am developing a page with team members. When you click on their photo I want the photos below to slide down and the content to appear. I have 4 rows with three photos in each on desktop view. For mobile view there are 5 rows with 2 photos in each. In order for the content to show up under the correct photo I put the content directly under the related photo in my HTML. Then I used the slideToggle function to slide the content down when the photo is clicked. Because the content is before the rest of the photos in the row it is pushing everything down, including the photos that should remain next to the photo that is clicked. Is there a way to have the photos at the end of the row remain in their position? </p>
  
  <p>Here is my HTML for one row:  </p>
  
  <pre><code>        &lt;div class="portfoliowork"&gt;
              &lt;img src="images/portfolioph.jpg" class="togglephoto" data-toggleid="toggledesc4"&gt;
          &lt;/div&gt;
          &lt;div class="toggledesc toggledesc4"&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing 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;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing 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 class="portfoliowork"&gt;
              &lt;img src="images/portfolioph.jpg" class="togglephoto" data-toggleid="toggledesc5"&gt;
          &lt;/div&gt;
          &lt;div class="toggledesc toggledesc5"&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing 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 class="portfoliowork"&gt;
              &lt;img src="images/portfolioph.jpg" class="togglephoto" data-toggleid="toggledesc6"&gt;
          &lt;/div&gt;
          &lt;div class="toggledesc toggledesc6"&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing 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;
  </code></pre>
  
  <p>Here is the CSS related to the JQuery:</p>
  
  <pre><code>.toggledesc{
      padding:1%;
      float: left;
      display: block;
  }
  
  .portfoliowork{
      width:33%;
      float: left;
      display: block;
      -moz-box-sizing:border-box;
      -webkit-box-sizing:border-box;
      box-sizing:border-box;
      padding:1%;
   }
  
  
  @media screen and (max-width: 500px) {
    .portfoliowork{
       width:50%;
     }
  }
  </code></pre>
  
  <p>Here is the jQuery:</p>
  
  <pre><code>&lt;script&gt;
  $('img[data-char=togglephoto1]')
      $(function(){
          $('.toggledesc').hide();
  
          $('.togglephoto').on('click', function(){
              var toggleid = $(this).attr('data-toggleid');
  
              $('.' +toggleid).slideToggle("slow");
          });
  
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Any suggestions would be greatly appreciated!
  Thank you!</p>