<!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">
h4{
width: 200px;
height: 28px;
background-color: #CD853F;
opacity: 0.5;
}
h4:hover{
opacity: 1;
}
h4.show {
opacity: 1;
}
h4 + p{
display: none;
}
</style>
<script>
$(function () {
var h4 = $("#links h4");
h4.click(function () {
$(this).toggleClass('show');
h4.not(this).removeClass('show')
h4.not('.show').next().slideUp()
$('.show + p').slideDown();
});
});
</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>
danik.js,
можно ли заменить на css анимацию строки 34 и 35
пробовал так но неполучилось
h4.show + p{
display: block;
height: 100%;
-webkit-transition: all 1s ease-out 0.5s;
-moz-transition: all 1s ease-out 0.5s;
-o-transition: all 1s ease-out 0.5s;
transition: all 1s ease-out 0.5s;
}
h4 + p{
display: none;
height: 0;
}
извиняюсь за свой
французкий css