spectacular information displaying

by John Doe

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div class="element">
    <div class="person">
        <div class="piccontainer">
            <img class="pic" src="http://kalu.16mb.com/public_html/pokedex/img/1.png" alt="Balbasaur">
        </div>
        <div class="info">
            <p class="name">Bulbasaur</p>
        </div>  
    </div>
    <div class="extrainfo">
        <div class="imageplace"></div>
        <p class="name">Bulbasaur</p>
            <p>45</p>
            <p>49</p>
            <p>49</p>
            <p>45</p>
            <p>65</p>
            <p>65</p>
    </div>
</div>
<div class="element">
    <div class="person">
        <div class="piccontainer">
            <img class="pic" src="http://kalu.16mb.com/public_html/pokedex/img/2.png" alt="Ivysaur">
        </div>
        <div class="info">
            <p class="name">Ivysaur</p>
        </div>  
    </div>
    <div class="extrainfo">
        <div class="imageplace"></div>
        <p class="name">Ivysaur</p>
            <p>60</p>
            <p>62</p>
            <p>63</p>
            <p>60</p>
            <p>80</p>
            <p>80</p>
    </div>
</div>
<div class="element">
    <div class="person">
        <div class="piccontainer">
            <img class="pic" src="http://kalu.16mb.com/public_html/pokedex/img/3.png" alt="Venusaur">
        </div>
        <div class="info">
            <p class="name">Venusaur</p>
        </div>  
    </div>
    <div class="extrainfo">
        <div class="imageplace"></div>
        <p class="name">Venusaur</p>
            <p>80</p>
            <p>82</p>
            <p>83</p>
            <p>80</p>
            <p>100</p>
            <p>100</p>
    </div>
</div>
<div class="element">
    <div class="person">
        <div class="piccontainer">
            <img class="pic"...

CSS

html{
  font-family: arial;
}
.element{
    width: calc(33.333% - 9px);
    padding: 10px 0;
    margin: 0 10px 10px 0;
    border: 1px solid #C0C0C0;
    background-color: #F6F6F6;
    font-family: arial;
    z-index: 1;
    float: left;
}
.element:nth-child(3n){
  margin: 0 0 10px 0;
}
.piccontainer{
    display: block;
    width: 70px;
    height: 70px;
    margin: 0 auto;
  border-radius: 50%;
    border: 1px solid #c0c0c0;
}
.pic{
    width: 70px;
    height: 70px;
    text-align: center;
    line-height: 70px; 
    position: relative;
    z-index: 2;
}
.info{
    padding: 0 10px;
}
.person p{
    margin: 0px;
    font-size: 12px;
    color: #C0C0C0;
}
.person p.name{
    font-size: 15px;
    color: #252525;
    margin: 10px 0 2px 0;
    text-align: center;
}
.extrainfocontainer{
  display: block;
  position: fixed;
  top: -100px;
  left: 0;
  width: 100%;
  height: 84px;
  background-color: #ffffff;
  padding: 16px 0 0 100px;
}
.extrainfocontainer p{
  color: #c0c0c0;
  margin: 0;
  font-size: 11px;
}
.extrainfo{
    display: none;
    opacity: 0;
    position: fixed;
    width: 100%;
    height: 100px;
    top: 0px;
    left: 0px;
    border: 1px solid #4679BD;
    z-index: 3;
}
.imageplace{
    height: 100px;
    width: 75px;
    background-color: #ffffff;
    float: left;
    margin-right: 80px;
}
.extrainfo p{
  font-size: 12px;
  margin: 0px;
}

JavaScript

$(".element").click(function() {
    var elem = $(this),
        oldelem = $(".element.active"),
        pic = elem.children(".person").find(".pic"),
        imgxy = elem.children(".person").find(".piccontainer"),
        imgxyTop = imgxy.position().top,
        imgxyLeft = imgxy.position().left,
        imgpalce = elem.children(".extrainfo").find(".imageplace"),
        top = imgpalce.position().top,
        left = imgpalce.position().left,
        infocontainer = $(".extrainfocontainer");
    if ($(".element").hasClass("active")) {
        if (elem.hasClass("active")) {
            elem.removeClass("active");
            TweenMax.to(".extrainfo", 0.5, {
                opacity: 0,
                display: 'none',
            });
            TweenMax.to(pic, 1, {
                top: imgxyTop,
                left: imgxyLeft,
            });
            TweenMax.to(pic, 0, {
                top: 0,
                left: 0,
                position: 'relative',
                delay: 1,
            });
						TweenMax.to(infocontainer, 1, {
                top: '-100px',
            });
        } else {
            oldelem.removeClass('active');
            var oldpic = oldelem.children(".person").find(".pic"),
                oldimgxy = oldelem.children(".person").find(".piccontainer"),
                oldimgxyTop = oldimgxy.position().top,
                oldimgxyLeft = oldimgxy.position().left,
                oldimgpalce = oldelem.children(".extrainfo").find(".imageplace"),
                oldtop = oldimgpalce.position().top,
                oldleft = oldimgpalce.position().left;
            TweenMax.to(oldelem.children(".extrainfo"), 0.5, {
                opacity: 0,
                display: 'none',
            });
            TweenMax.to(oldpic, 1, {
                top: oldimgxyTop,
                left: oldimgxyLeft,
              	position: 'absolute',
            });
            TweenMax.to(oldpic, 0, {
                top: 0,
                left: 0,
 ...