Load content on image click

Question

I am trying to create a team page for website. A picture of each member is laid out in a "grid" type of view. There are two boxes below this grid with some content. Box 1: Basic div with some text. Box 2: Div with some sample % or value based bars.

When a website visitor click on a team members picture, the boxes will get populated with information about that member. Box 1: Description about the person and maybe some links. Box 2: The data in the bars will change to values that represent the skills the member has.

Can this be done in any way other than: pagify.js?

EDIT*** (16 Aug 2013) The first part of my question is sovled. For the second box, I wanted to make a animated skill bar like the ones here http://www.alessioatzeni.com/blog/css3-skill-bar-animation/ How can i update these dynamically?

EDIT*** (17 Aug 2013) I managed to implement this features :). Thanks.

Thanks

Answer 1

Javascript/jQuery onClick show and hide events should do what you want.

http://www.w3schools.com/jquery/jquery_hide_show.asp - basics http://www.mkyong.com/jquery/jquery-show-and-hide-example/ - workinging example http://www.goldensearch.net/content/tutorials/show-hidden-content-with-javascript.php - pure javascript :-)

If this isn't what you're looking for we (or at least I) will need more detail in the question.

Answer 2

Of course you could use AJAX to achieve this behaviour but as long as we're not talking about thousands of team members, a simpler but yet powerful solution is to hide all detailed information and only show them for an active member the user clicked on.

Update : (Working version on JsFiddle [http://jsfiddle.net/9kfKw/])

HTML (Example)

<ul id="members">
    <li>Member 1</li>
    <li>Member 2</li>
</ul>

<div id="details">
    <div>
        <div class="left">
            <p>Some Info about Member 1</p>
        </div>
        <div class="right">
            <p>Some more Info Member 1..</p>
        </div>
    </div>
    <div>
        <div class="left">
            <p>Some Info about Member 2</p>
        </div>
        <div class="right">
            <p>Some more Info about Member2..</p>
        </div>
    </div>
</div>

JavaScript

$(function() {
    $('#members li').click(function() {
        var index = $(this).index();
        $('#details > div').hide().eq(index).show();
    });
});

Demo

Find a working version on JsFiddle ( http://jsfiddle.net/9kfKw/ )