Edit in JSFiddle

var NUM=20;

$.each(students,function(index,student){     
    if (index == NUM ) return false;
    $("#studentTemplate").tmpl(student).appendTo("#studentInfo");
});

// Show/Hide div with more info
$('div.contact_more').hide();

var visible = true;

$('a.more').click(function() {
    var morelink = $(this);
    $(this).parent().next('div.contact_more').slideToggle('slow', function(){
       visible = !visible;
       morelink.html(visible ? '[+ MORE]' : '[- LESS]');                           
    }); 
    return false; 
});

// Flickr API - JSON Request
// Photos from group: http://www.flickr.com/groups/squareimg/
var url='http://api.flickr.com/services/rest/?&method=flickr.groups.pools.getPhotos&group_id=17449586@N00&per_page='+NUM+'&api_key=f024df17cc5149c2c0e84d02bfa8d663&format=json&jsoncallback=?';

// With help from: http://www.viget.com/inspire/using-the-flickr-api/
$.getJSON(url, function(data){
    $.each(data.photos.photo, function(key, val){
        var s = "";
        var photo = val;
        var t_url = "http://farm" + photo.farm + ".static.flickr.com/" + photo.server + "/" + photo.id + "_" + photo.secret + "_" + "t.jpg";         
        
        $('.pic:eq('+key+')').attr("src", t_url).attr("alt", photo.title).attr("width", 90).attr("height", 90);       
    });
});

External resources loaded into this fiddle:

<script id="studentTemplate" type="text/x-jquery-tmpl"> 
<div class="contact">
    <div class="left">
        <img class="pic" src="" />
    </div>
    <div class="right">
        <p class="name">${FName} ${LName}</p>
        <p class="type">EMAIL</p>
        {{if (Email.length > 42)}}
        <p class="err">ERROR: Email too long!</p>
        {{else}}
        <p class="value">${Email}</p>
        {{/if}}
        <p class="type">PHONE </p>
        <p class="value">${Phone}</p>
        <p class="type">FAX</p>
        <p class="value">${Fax}</p>
    </div>  
    <a href="#" class="more">[+ MORE]</a>
</div>
<div class="contact_more">
    <hr>
    <div class="left">
        <p class="type">STATUS</p>
        <p class="value">${Status}</p>
        <p class="type">HEIGHT</p>
        <p class="value">${Height}</p>
        <p class="type">WEIGHT</p>
        <p class="value">${Weight}</p>
    </div>
    <div class="left">
        <p class="type">DATE OF BIRTH</p>
        <p class="value">${DOB}</p>
        <p class="type">CITY, STATE</p>
        <p class="value"><a href="http://maps.google.com/maps?q=${Lat},${Lon}(${City},+${State})" target="_blank">${City}, ${State}</a></p>
        <p class="type">PROFESSION</p>
        <p class="value">${Profession}</p>
    </div>
    <div class="left">
        <p class="type">QUIZES RESULTS</p>
        <table>
                <tr>
                    <td>Q1</td>
                    <td>Q2</td>
                    <td>Q3</td>
                    <td>Q4</td>
                </tr>
                <tr>
                    <td>${Quizzes[0]}</td>
                    <td>${Quizzes[1]}</td>
                    <td>${Quizzes[2]}</td>
                    <td>${Quizzes[3]}</td>
                </tr>
        </table>
    </div> 
       <div class="left">
        <p class="type">HOMEWORK RESULTS</p>
        <table>
                <tr>
                    <td>HW1</td>
                    <td>HW2</td>
                    <td>HW3</td>
                    <td>HW4</td>
                </tr>
                <tr>
                    <td>${HW1}</td>
                    <td>${HW2}</td>
                    <td>${HW3}</td>
                    <td>${HW4}</td>
                </tr>
        </table>
    </div>    
</div>
<br>
</script>

<div id="studentInfo">

</div>
body {
    font: normal 12px/20px "helvetica", arial, sans-serif;
    background-color: #F1F1F1;
    color: #333333;
}

a {
    color: #333333;    
}

a:visited {
    color: #333333;   
}

a:hover {
    text-decoration: none;
}

div.contact {
    position: relative;
    overflow: auto;
    border-top: 3px solid #404040;
    background-color: #E9E9E9;
    width: 400px;
}

div.contact .left {
    float: left;
}

div.contact .right {
    margin-left: 10px;
    margin-top: 1px;
    float: left;   
}

div.contact .pic {
    margin: 5px;
    border: 5px solid #F2F2F2;
}

p.name {
    font: normal 20px georgia, serif;   
}

p.type {
    font-size: 9px;
    color: #808080;  
}

p.value {
    margin-top: -7px;   
}

p.err {
    margin-top: -7px;
    color: red;
}

a.more {
    position: absolute;
    right: 5px;
    bottom: 0px;
    font-size: 9px;
}

a.more:hover {
    text-decoration: underline;
}

div.contact_more {
    overflow: auto;
    background-color: #E9E9E9;
    width: 400px;   
}

div.contact_more .left {
    float: left;
    margin-left: 20px;
    margin-bottom: 8px; 
}

hr {
    width: 95%;
    height: 1px;
    border: none;
    background-color: #ccc; 
}

table, td {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    font-size: 10px;
    text-align: center;
}

td {
    padding: 0px 2px;
    display: table-cell;
}

tr {
    height: 15px;   
}