用jQuery切換滑出div並將div推到新行上

Question

我遇到了一個我正在處理的項目的小問題。

這可能很簡單，但我不太熟練jQuery和我有幾個問題。我基本上想要有一個4行項目的網格，一旦用戶點擊一個div，它會滑出一個與網格項目相同寬度的生物（25％）。然後將它旁邊的div推到新的一行上。

爲了給出一個想法，這是一個「我們的團隊」頁面，此頁面將顯示網格中每個人的照片，並且如果他們點擊該人員將其滑出他們的生物。

這裏是我的代碼：

HTML

<div class="team-list one-fourth nomargin"> 
    <div class="team-photo"> 
     <img class="front" src="{front_image}" alt="{title}" /> 
    </div> 
    <div class="team-bio"> 
     team bio here 
    </div> 
</div> 

CSS

/* THE TEAM PAGE */ 
.team-list { 
    position:relative; 
} 

.team-list .team-photo img { 
    max-width:100%; 
} 

http://jsfiddle.net/7bJML/

用於提前任何幫助，非常感謝！

Answer 1

據我所知，你看起來像這樣。我希望這將有助於

添加此處理滑動生物信息：

$('.team-photo').click(function() { 
    $(this).next().slideToggle(); 
}); 

和CSS：

/* THE TEAM PAGE */ 
.team-list { 
    position:relative; 
    cursor: pointer 
} 

.team-list .team-photo img { 
    max-width:100%; 
} 

.team-bio { 
    display: none; 
} 

http://jsfiddle.net/QrfzA/