On click, show() content below selected element's row?

Question

What I'm trying to do is build a team page. Similar to http://www.razorfish.com/people/ourpeople.htm

I want to create a floated or inline row of elements, and show hidden content within each inline element UNDER the selected element. Thus, moving the next row further down.
However, I'm a newbie to JavaScript.

This is what I have now: jsfiddle

// var tag = $(this).parent().find(".hidden-info");
// var prevStyle = tag.attr('style');

$('.profile-header').click(function(){

//$('.hidden-info').show();
$(this).parent().find(".hidden-content").toggle();
//return false;

$(this).parent().find(".hidden-content").append(".people");
$(this).parent().find(".hidden-content").css("position","relative", "z-index","99");

});

Does anyone have any idea on how to go about achieving this?

Answer 1

Rather than traversing the DOM using .parent() and .find() , you can simply specify the selector context:

$('.profile-header').click(function(){
    var $this = $(this),
        hidden_content = $(".hidden-content", $this);

    hidden_content.toggle().toggleClass("people");
});

Your append as written won't do anything. If you are trying to change its class, you should consider using addClass or toggleClass instead and add your CSS to the new class rather than changing your CSS in the javascript.

Answer 2

Place a .people-data div under each row of people. on each people click, find the .people-data that corresponds to that row and populate it with data.

$('.profile-header').parent().find('.people-data') // populate and show

Edit:

If you want it to be responsive, place the .people-data under each person and expand it the same way you would a row. This will work if you have each person item display:inline-block

Answer 3

The key changes are:

• Setting display: none; instead of float: left; to the li 's
• Setting position: absolute; and left: 0px; to the .hidden-content
• Setting the selected li 's height programatically to pull the next line down
• Toggling the previously selected li 's to hide old detailing section

See working fiddle sample here.