вариант с css анимацией
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
#links h4{
width:200px;
height:28px;
background:#CD853F;
opacity:0.5;
margin:2px 0px;
}
#links h4:hover,#links h4.show{
opacity:1;
}
#links h4.show+p{
height:45px;
background:#00F;
color:#FFF;
}
#links h4+p{
margin:0;
height:0;
overflow:hidden;
width:200px;
-webkit-transition:all 0.5s ease-out 0.5s;
-moz-transition:all 0.5s ease-out 0.5s;
-o-transition:all 0.5s ease-out 0.5s;
transition:all 0.5s ease-out 0.5s;
}
</style>
<script>
$(function () {
var h4 = $("#links h4");
h4.click(function () {
$(this).toggleClass('show');
h4.not(this).removeClass('show')
});
});
</script>
</head>
<body>
<div class="admin" id="links">
<h4 style="background-image: url(image/steam.png);"><a href="#"></a></h4>
<p class="steam">
<a>steam id</a>
</p>
<h4 style="background-image: url(image/vk.png);"><a href="#"></a></h4>
<p class="vk">
<a>vk.com</a>
</p>
<h4 style="background-image: url(image/skype.png);"><a href="#"></a></h4>
<p class="skype">
<a>skype</a>
</p>
</div>
</body>
</html>