title: Expandable Thumbnail grid Twitter Bootstrap
body: <p>Ok so I was using a plugin of sorts located here to pull this off. I have been working on this page for a few hours wen I checked with my client. He stated that he does not want me to use a plugin. He referenced the jQuery Animate but I am such a noob to writing my own code I am not sure where to start with all that. I included an image of what I need it to do and look like but I need some help finding a solution. Thank you for all your help and time!)</p>
  
  <p>I need to add that the description will always expand directly under the leaders thumbnail. I would like it to be seemless for mobile users as well. If possible?</p>
  
  <p><img src="https://i.stack.imgur.com/XaOsV.jpg" alt="enter image description here"></p>
  
  <pre><code>&lt;div class="container leaderShipwrapper gallery-items"&gt;
      &lt;ul id="items" class="row list-unstyled"&gt;
          &lt;div class="col-sm-12 col-sm-offset-1 leaderShipgrid"&gt;
              &lt;li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"&gt;&lt;a href="#"&gt;&lt;img class="image-responsive" src="images/leader.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="col-sm-2 col-xs-4 leader" data-name="ray" data-title="dunce" data-profile="dunce profile"&gt;&lt;a href="#"&gt;&lt;img class="image-responsive" src="images/leader.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"&gt;&lt;a href="#"&gt;&lt;img class="image-responsive" src="images/leader.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"&gt;&lt;a href="#"&gt;&lt;img class="image-responsive" src="images/leader.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="col-sm-2 col-xs-4 leader" data-name="joe" data-title="developer" data-profile="profile"&gt;&lt;a href="#"&gt;&lt;img class="image-responsive" src="images/leader.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-10 col-sm-offset-1"&gt;
              &lt;li id="1" class="leaderDescription"&gt;&lt;div class="leaderName"&gt;NAME&lt;/div&gt;&lt;div class="leaderTitle"&gt;TITLE&lt;/div&gt;&lt;div class="leaderProfile"&gt;Description for row 1 cell 1&lt;/div&gt;&lt;/li&gt;
          &lt;/div&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  $(document).ready(function() {
              $('.navbar .dropdown').hover(function() {
            $(this).find('.hover-dropdown').first().stop(true, true).slideDown(150);
          }, function() {
            $(this).find('.hover-dropdown').first().stop(true, true).slideUp(105)
          });
  
          $('.leader').click(function(){
      $(this).parent().siblings().find('.leaderDescription').find('.leaderName').text($(this).attr('data-name'));
      $(this).parent().siblings().find('.leaderDescription').find('.leaderTitle').text($(this).attr('data-title'));
      $(this).parent().siblings().find('.leaderDescription').find('.leaderProfile').text($(this).attr('data-profile'));
      $(this).parent().siblings().find('.leaderDescription').slideDown();
      });
  
      });
  </code></pre>
  
  <p>Ok, so I have at a good point to ask this question now. I need to know what I need to do to get this closer to the image above. I have the first row and I am getting the data to load correctly I just cant get the slide up if one is already open then slide down the new one that was clicked. I also need it to open the info below the leaders photo like the in the photo I added. Please let me know how far I am from this?</p>