Открывашка 219
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.disc_content1 {
overflow: hidden;
height: 0px;
background-color: rgb(0, 255, 0);
-webkit-transition: all 0.3s ease;
/* анимация для chrome */
-moz-transition: all 0.3s ease;
/* анимация для firexox */
-o-transition: all 0.3s ease;
/* анимация для opera */
transition: all 0.3s ease;
/* анимация для остальных браузеров */
}
.disc_content2 {
overflow: hidden;
height: 0px;
background-color: rgb(255, 255, 0);
-webkit-transition: all 0.3s ease;
/* анимация для chrome */
-moz-transition: all 0.3s ease;
/* анимация для firexox */
-o-transition: all 0.3s ease;
/* анимация для opera */
transition: all 0.3s ease;
/* анимация для остальных браузеров */
}
.disc_content_anim1 {
height: 100px;
}
.disc_content_anim2 {
height: 0px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var s = $(".block_disc");
s.each(function(indx, el) {
var a = $("a", el),
d = $(".disc_content1, .disc_content2", el);
$(el).on("click", "a", function(event) {
event.preventDefault();
var i = a.index(this),
elem = d.eq(i),
add = elem.is(".disc_content_anim1");
d.removeClass("disc_content_anim1").addClass("disc_content_anim2");
!add && elem.removeClass("disc_content_anim2").addClass("disc_content_anim1");
});
a.first().click()
});
});
</script>
</head>
<body>
<div class="block_disc">
<img class="cover_disc" src="img/disc_Lonesome_Crow_1.jpg">
<div class="disc_descript">
<div class="disc_link">
<a id="link1" class="disc_a" href="#">Описание</a>
</div>
<div class="disc_link top-right_radius">
<a id="link2" class="disc_a top-right_radius" href="#">Треки-лист</a>
</div>
</div>
<div id="div1" class="disc_content1">Описание1
</div>
<div id="div2" class="disc_content2">Треки-лист1
</div>
</div>
<div class="block_disc">
<img class="cover_disc" src="img/disc_Lonesome_Crow_1.jpg">
<div class="disc_descript">
<div class="disc_link">
<a id="link1" class="disc_a" href="#">Описание</a>
</div>
<div class="disc_link top-right_radius">
<a id="link2" class="disc_a top-right_radius" href="#">Треки-лист</a>
</div>
</div>
<div id="div1" class="disc_content1">Описание2
</div>
<div id="div2" class="disc_content2">Треки-лист2
</div>
</div>
</body>
</html>