Всё для ВебМастера

<div class="accordion-wrap">
<div class="accordion">
<a href="#" class="active"><i class="fa fa-user"></i>Профиль</a>
<div class="sub-nav active">
<div class="html about-me">
<div class="photo">
<div class="photo-overlay">
<span class="plus">+</span>
</div>
</div>
<h4>@khadkamhn</h4>
<p>Привет, меня зовут Давид и вы попали на мою страницу профиля на сайте Rudebox.</p>
<div class="social-link">
<a class="link link-twitter" href="#" target="_blank"><i class="fa fa-twitter"></i></a>
<a class="link link-codepen" href="#" target="_blank"><i class="fa fa-codepen"></i></a>
<a class="link link-facebook" href="#" target="_blank"><i class="fa fa-facebook"></i></a>
<a class="link link-dribbble" href="#" target="_blank"><i class="fa fa-dribbble"></i></a>
</div>
</div>
</div>
<a href="#"><i class="fa fa-comments"></i> Чат</a>
<div class="sub-nav">
<div class="html chat">
<div class="user user-khadkamhn clearfix">
<span class="text-msg pull-right">Привет, как твой день?</span>
</div>
<div class="user user-khadkamhn clearfix">
<span class="text-msg pull-right">Хорошо, сегодня закончу новые уроки для сайта.</span>
</div>
<div class="user user-dribble clearfix">
<span class="photo pull-left" data-username="dribbble"><i class="fa fa-dribbble"></i></span>
<span class="text-msg">Желаю удачи и жду, чтобы прочитать</span>
</div>
<div class="user user-dribble clearfix">
<span class="photo pull-left" data-username="dribbble"><i class="fa fa-dribbble"></i></span>
<span class="text-msg">Уроки будут очень скоро и про параллакс, ждем ребятки.... :)</span>
</div>
</div>
</div>
<a href="#"><i class="fa fa-envelope"></i> Сообщения <span class="pull-right alert-numb">21</span></a>
<div class="sub-nav">
<a href="#">Входящие<span class="pull-right alert-numb">11</span></a>
<a href="#">Закладки <span class="pull-right alert-numb">10</span></a>
<a href="#">Отправленные</a>
<a href="#">Черновики</a>
<a href="#">Корзина</a>
<a href="#">Все сообщения</a>
</div>
<a href="#"><i class="fa fa-dribbble"></i> Dribbble подписка</a>
<div class="sub-nav">
<div class="html invite">
<p>Следите за мной в <span class="dribbble">dribbble</span> сети</p>
<p>Ты уже подписался на обновления?</p>
<a class="btn" href="#" target="_blank">Подписаться</a>
</div>
</div>
</div>
</div>

.accordion{
width:100%;
margin:auto;
max-width:280px;
overflow:hidden;
border-radius:3px;
background:#B7AFA3;
box-shadow:0 17px 50px 0 rgba(0,0,0,.19),0 12px 15px 0 rgba(0,0,0,.24);
}
.accordion&gt;a{
color:#374046;
padding:15px;
display:block;
text-decoration:none;
transition:all .3s ease-in-out 0s;
}
.accordion&gt;a:not(:last-child){
border-bottom:1px solid rgba(0,0,0,.2);
}
.accordion&gt;a:hover,
.accordion&gt;a.active{
background:#E8D0A9;
}
.accordion&gt;a.active{
color:#B77F24;
}
.accordion&gt;a&gt;.alert-numb,
.accordion&gt;.sub-nav&gt;a&gt;.alert-numb{
color:#eee;
right:10px;
height:22px;
min-width:40px;
font-size:12px;
font-weight:600;
line-height:22px;
border-radius:15px;
text-align:center;
background:#665e51;
}
.accordion&gt;a.active&gt;.alert-numb,
.accordion&gt;.sub-nav&gt;a.active&gt;.alert-numb{
background:#d0a051;
}
.accordion .sub-nav{
display:none;
color:#374046;
overflow:hidden;
background:#ecf0f1;
}
.accordion .sub-nav.open{
display:block;
}
.accordion .sub-nav a{
display:block;
color:inherit;
font-weight:300;
padding:10px 15px;
text-decoration:none;
transition:all .2s ease-in-out 0s;
}
.accordion .sub-nav a:not(:last-child){
border-bottom:1px solid rgba(0,0,0,.1);
}
.accordion .sub-nav a:hover{
background:#c2ced1;
box-shadow:5px 0 0 #8ca3a8 inset;
}

.accordion .html{
padding:15px;
}
.accordion .about-me{
text-align:center;
position:relative;
}
.accordion .about-me h4{
margin-bottom:0;
}
.accordion .about-me p{
font-size:14px;
font-weight:300;
margin-bottom:0;
}
.accordion .about-me .photo{
width:95px;
height:95px;
margin:auto;
overflow:hidden;
border-radius:50%;
position:relative;
border:4px solid #fff;
box-shadow:0 6px 20px 0 rgba(0,0,0,.19),0 8px 17px 0 rgba(0,0,0,.2);
}
.accordion .about-me .photo .photo-overlay{
top:0;
left:0;
right:0;
bottom:0;
opacity:0;
visibility:hidden;
position:absolute;
background:rgba(0,0,0,.4);
}
.accordion .about-me .photo .photo-overlay .plus{
top:50%;
left:50%;
width:30px;
height:30px;
color:#1a1a1b;
cursor:pointer;
font-size:24px;
font-weight:100;
margin-top:-15px;
margin-left:-15px;
position:absolute;
line-height:30px;
border-radius:50%;
text-align:center;
background:#e8d0a9;
transform:scale(0) rotate(0);
transition:all .1s ease-in-out 0s;
}
.accordion .about-me .photo:hover .photo-overlay{
opacity:1;
visibility:visible;
}
.accordion .about-me .photo:hover .photo-overlay .plus{
transform:scale(1) rotate(90deg);
}

.accordion .about-me .social-link{
top:0;
left:0;
right:0;
bottom:0;
opacity:0;
padding-top:48px;
visibility:hidden;
position:absolute;
background:rgba(0,0,0,.3);
transition:opacity .5s ease-in-out 0s;
}
.accordion .about-me .social-link.active{
opacity:1;
visibility:visible;
}
.accordion .about-me .social-link .link{
width:30px;
padding:0;
color:#eee;
height:30px;
margin:0 4px;
line-height:28px;
border-radius:50%;
display:inline-block;
transform:translateY(-80px) scale(0);
border:1px solid rgba(0,0,0,.2);
}

$(function(){
Profile.load();
});

Profile = {
load:function(){
this.links();
this.social();
this.accordion();
},
links:function(){
$('a[href="#"]').click(function(e){
e.preventDefault();
});
},
social:function(){
$('.accordion .about-me .photo .photo-overlay .plus').click(function(){
$('.social-link').toggleClass('active');
$('.about-me').toggleClass('blur');
});
$('.social-link').click(function(){
$(this).toggleClass('active');
$('.about-me').toggleClass('blur');
});
},
accordion:function(){
var subMenus = $('.accordion .sub-nav').hide();
$('.accordion &gt; a').each(function(){
if($(this).hasClass('active')){
$(this).next().slideDown(100);
}
});
$('.accordion &gt; a').click(function(){
$this = $(this);
$target = $this.next();
$this.siblings('a').removeAttr('class');
$this.addClass('active');
if(!$target.hasClass('active')){
subMenus.removeClass('active').slideUp(100);
$target.addClass('active').slideDown(100);
}
return false;
});
}
}