title: Multiple loops within loops on different rows
body: <p>I need a loop that calls in a custom post type called 'team members' the slug for which is 'team'. The team members are displayed in rows of five with each member consisting of its own avatar and slide down toggle content in a separate DIV out side the list of avatars. I've written out a basic loop structure which i'm not sure if its best or right way to do it. Can someone help me please?</p>
  
  <pre><code>                    /* ROW 1 */
  
                  query_posts('showposts=5');
                  $ids = array();
  
                  /* Loop 1 A - displays the row of avatars */
                  while (have_posts()) : the_post();
                      $ids[] = get_the_ID();
                      the_title();
                  endwhile;
  
                  /* Loop 1 B - displays the slide down content in new row for each avatar above */
                  while (have_posts()) : the_post();
                      $ids[] = get_the_ID();
                      the_content();
                  endwhile;
  
  
  
                  /* ROW 2 */
  
                  //Write code to do second row if number posts greater than 5. 
                  //If post greater than 5 do...
  
                  /* Loop 2 A - displays the row of avatars */
                  query_posts(array('post__not_in' =&gt; $ids, 'showposts=5');
  
                  while (have_posts()) : the_post();
                      the_title();
                  endwhile;
  
                  /* Loop 2 B - displays the slide down content in new row for each avatar above */
                  while (have_posts()) : the_post();
                      the_content();
                  endwhile;
  
  
  
                  /* ROW 3 */
  
                  //Write code to do third row if number posts greater than 15. 
                  //If post greater than 10 do...
  
                  /* Loop 3 A - displays the row of avatars */
                  $ids_row_two = query_posts(array('post__not_in' =&gt; $ids));
                  $ids_row_three = query_posts(array('post__not_in' =&gt; $ids_row_three));
                  query_posts(array('post__not_in' =&gt; $ids_row_three, 'showposts=5'));
  
                  while (have_posts()) : the_post();
                      $ids[] = get_the_ID();
                      the_title();
                  endwhile;
  
                  /* Loop 3 B - displays the slide down content in new row for each avatar above */
                  while (have_posts()) : the_post();
                      $ids[] = get_the_ID();
                      the_content();
                  endwhile;
  </code></pre>
  
  <p>Here is the HTML structure I wish to output...</p>
  
  <pre><code>&lt;!-- row 1 --&gt;
                   &lt;!-- Avatars --&gt;
                   &lt;div class="member_block"&gt;
                       &lt;div class="container avatars"&gt;
  
                       &lt;!-- avatar 1 ---&gt;
                          &lt;div id="show_ryan" class="box five columns" data-target="#member_ryan"&gt;
                              &lt;div class="avatar avatar-on-hidden"&gt;
                                  &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/img/team/ryan.png"&gt;
                                  &lt;h4 class="name"&gt;Ryan&lt;/h4&gt;
                                  &lt;p class="position"&gt;Creative Director&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;div class="avatar2 avatar-on-hover"&gt;
                                  &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/img/team/ryan.jpg"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                       &lt;!-- avatar 2 ---&gt;
  
                          &lt;div id="show_brian" class="box five columns" data-target="#member_brian"&gt;
                              &lt;div class="avatar avatar-on-hidden"&gt;
                                  &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/img/team/brian.png"&gt;
                                  &lt;h4 class="name"&gt;Brian&lt;/h4&gt;
                                  &lt;p class="position"&gt;Director&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;div class="avatar2 avatar-on-hover"&gt;
                                  &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/img/team/brian.jpg"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                       &lt;!-- avatar 3 ---&gt;
  
                          &lt;div id="show_emma" class="box five columns" data-target="#member_emma"&gt;
                              &lt;div class="avatar avatar-on-hidden"&gt;
                                  &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/img/team/emma.png"&gt;
                                  &lt;h4 class="name"&gt;Emma&lt;/h4&gt;
                                  &lt;p class="position"&gt;Creative Director&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;div class="avatar2 avatar-on-hover"&gt;
                                  &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/img/team/emma.jpg"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                       &lt;!-- avatar 4 ---&gt;
  
                          &lt;div id="show_john" class="box five columns" data-target="#member_john"&gt;
                              &lt;div class="avatar avatar-on-hidden"&gt;
                                  &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/img/team/john.png"&gt;
                                  &lt;h4 class="name"&gt;John&lt;/h4&gt;
                                  &lt;p class="position"&gt;Creative Director&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;div class="avatar2 avatar-on-hover"&gt;
                                  &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/img/team/john.jpg"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                       &lt;!-- avatar 5 ---&gt;
  
                          &lt;div id="show_neil" class="box five columns" data-target="#member_neil"&gt;
                              &lt;div class="avatar avatar-on-hidden"&gt;
                                  &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/img/team/neil.png"&gt;
                                  &lt;h4 class="name"&gt;Neil&lt;/h4&gt;
                                  &lt;p class="position"&gt;Creative Director&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;div class="avatar2 avatar-on-hover"&gt;
                                  &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/img/team/neil.jpg"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;&lt;!-- container --&gt;
  
                   &lt;!-- each team member's slide down content --&gt;
                      &lt;div class="member_row"&gt;
                          &lt;div class="container"&gt;
  
                       &lt;!-- avatar 1 content ---&gt;
  
                              &lt;div id="member_ryan" class="member-info"&gt;
                                  &lt;? the_content(); ?&gt;
                              &lt;/div&gt;&lt;!-- //Ryan --&gt;
  
                       &lt;!-- avatar 2 content ---&gt;
  
                              &lt;div id="member_brian" class="member-info"&gt;
                                  &lt;? the_content(); ?&gt;
                              &lt;/div&gt;
  
                       &lt;!-- avatar 3 content ---&gt;
  
                              &lt;div id="member_emma" class="member-info"&gt;
                                  &lt;? the_content(); ?&gt;
                              &lt;/div&gt;
  
                       &lt;!-- avatar 4 content ---&gt;
  
                              &lt;div id="member_john" class="member-info"&gt;
                                  &lt;? the_content(); ?&gt;
                              &lt;/div&gt;
  
                       &lt;!-- avatar 5 content ---&gt;
  
                              &lt;div id="member_neil" class="member-info"&gt;
                                  &lt;? the_content(); ?&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;&lt;!-- .container --&gt;
                      &lt;/div&gt;&lt;!-- .member_row --&gt;
  
  &lt;!-- row 2 --&gt;
                   &lt;!-- Avatars --&gt;
                   &lt;div class="member_block"&gt;
                       &lt;div class="container avatars"&gt;
  
                       &lt;!-- avatar 1 ---&gt;
                          &lt;div id="show_ryan" class="box five columns" data-target="#member_ryan"&gt;
                              &lt;div class="avatar avatar-on-hidden"&gt;
                                  &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/img/team/ryan.png"&gt;
                                  &lt;h4 class="name"&gt;Ryan&lt;/h4&gt;
                                  &lt;p class="position"&gt;Creative Director&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;div class="avatar2 avatar-on-hover"&gt;
                                  &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/img/team/ryan.jpg"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                       &lt;!-- avatar 2 ---&gt;
  
                          &lt;div id="show_brian" class="box five columns" data-target="#member_brian"&gt;
                              &lt;div class="avatar avatar-on-hidden"&gt;
                                  &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/img/team/brian.png"&gt;
                                  &lt;h4 class="name"&gt;Brian&lt;/h4&gt;
                                  &lt;p class="position"&gt;Director&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;div class="avatar2 avatar-on-hover"&gt;
                                  &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/img/team/brian.jpg"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                       &lt;!-- avatar 3 ---&gt;
  
                          &lt;div id="show_emma" class="box five columns" data-target="#member_emma"&gt;
                              &lt;div class="avatar avatar-on-hidden"&gt;
                                  &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/img/team/emma.png"&gt;
                                  &lt;h4 class="name"&gt;Emma&lt;/h4&gt;
                                  &lt;p class="position"&gt;Creative Director&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;div class="avatar2 avatar-on-hover"&gt;
                                  &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/img/team/emma.jpg"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                       &lt;!-- avatar 4 ---&gt;
  
                          &lt;div id="show_john" class="box five columns" data-target="#member_john"&gt;
                              &lt;div class="avatar avatar-on-hidden"&gt;
                                  &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/img/team/john.png"&gt;
                                  &lt;h4 class="name"&gt;John&lt;/h4&gt;
                                  &lt;p class="position"&gt;Creative Director&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;div class="avatar2 avatar-on-hover"&gt;
                                  &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/img/team/john.jpg"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                       &lt;!-- avatar 5 ---&gt;
  
                          &lt;div id="show_neil" class="box five columns" data-target="#member_neil"&gt;
                              &lt;div class="avatar avatar-on-hidden"&gt;
                                  &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/img/team/neil.png"&gt;
                                  &lt;h4 class="name"&gt;Neil&lt;/h4&gt;
                                  &lt;p class="position"&gt;Creative Director&lt;/p&gt;
                              &lt;/div&gt;
                              &lt;div class="avatar2 avatar-on-hover"&gt;
                                  &lt;img src="&lt;?php bloginfo('template_directory'); ?&gt;/img/team/neil.jpg"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;&lt;!-- container --&gt;
  
                   &lt;!-- each team member's slide down content --&gt;
                      &lt;div class="member_row"&gt;
                          &lt;div class="container"&gt;
  
                       &lt;!-- avatar 1 content ---&gt;
  
                              &lt;div id="member_ryan" class="member-info"&gt;
                                  &lt;? the_content(); ?&gt;
                              &lt;/div&gt;&lt;!-- //Ryan --&gt;
  
                       &lt;!-- avatar 2 content ---&gt;
  
                              &lt;div id="member_brian" class="member-info"&gt;
                                  &lt;? the_content(); ?&gt;
                              &lt;/div&gt;
  
                       &lt;!-- avatar 3 content ---&gt;
  
                              &lt;div id="member_emma" class="member-info"&gt;
                                  &lt;? the_content(); ?&gt;
                              &lt;/div&gt;
  
                       &lt;!-- avatar 4 content ---&gt;
  
                              &lt;div id="member_john" class="member-info"&gt;
                                  &lt;? the_content(); ?&gt;
                              &lt;/div&gt;
  
                       &lt;!-- avatar 5 content ---&gt;
  
                              &lt;div id="member_neil" class="member-info"&gt;
                                  &lt;? the_content(); ?&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;&lt;!-- .container --&gt;
                      &lt;/div&gt;&lt;!-- .member_row --&gt;
                  &lt;/div&gt;&lt;!-- .member_block --&gt;
  </code></pre>