切换使用jQuery滑动div并将div推到新行

Question

I'm having a small issue with a project i'm working on.

It's probably very simple but I'm not overly proficient with jquery and am having a few issues. I basically want to have a grid of 4 item rows, once a user clicks on a div, it slides out a bio the same width as the grid item (25%). Then pushes the div beside it onto a new row.

To give an idea, it's for an "our team" page, this page will display the photo of everyone in the grid and if they click the person it slides out their bio.

Here is my code:

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/

Many thanks for any help in advance!

Answer 1

As I understood you are looking something like this. I hope it will help

Add this handler for sliding bio info:

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

And 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/