<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.hide-block {
display: none;
max-height: 1000px
}
.hide-block:last-child {
max-height: 700px
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
$('.border-price-block').on('click', function() {
var m = $(this).data('mode') ^ 1,
o = $(this).data({mode:m}).find('.hide-block');
m ? o.slideDown(400) : o.slideUp(400)
}).data({mode:0})
});
</script>
</head>
<body>
<div class="border-price-block">
Тут постоянно видимый контент
<div class="hide-block"><hr>
Тут скрытый контент, который разворачивается при нажатии на родительский блок (сверху вниз)
</div>
</div>
<div class="border-price-block">
Тут постоянно видимый контент
<div class="hide-block"><hr>
Тут скрытый контент, который разворачивается при нажатии на родительский блок (сверху вниз)
</div>
</div>
<div class="border-price-block">
Тут постоянно видимый контент
<div class="hide-block"><hr>
Тут скрытый контент, который разворачивается при нажатии на родительский блок (сверху вниз)
</div>
</div>
</body>
</html>
|