Приветствую. С горем пополам смог сам наваять такой простенький код открывания и закрывания блока. Но проблема в том, что блоков много на странице и при клике одного реагируют все. Не знаю как надо указывать на определённый блок.
$(document).ready(function(){
var $size = 80;
if($('.cont').height() > $size){
$('.cont').addClass('hide');
$('<span>', {text: 'Открыть', class: 'open'}).appendTo('.wrap');
$(".open").click(function () {
$('.cont').toggleClass('hide').toggleClass('full');
var $button = $(this);
$button.text($button.text() == "Открыть" ? "Закрыть": "Открыть");
});
}
});
.wrap {
width: 350px;
padding: 10px;
background: #ccc;
font-size: 16px;
margin: 50px;
}
.cont {
overflow: hidden;
line-height: 1.25;
transition: max-height 0.3s ease 0s;
}
.full {
max-height: 400px;
}
.hide {
max-height: 80px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="cont">
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>
</div>
<div class="wrap">
<div class="cont">
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
</div>
</div>
Покажите, пожалуйста, как реализовать задачу и ещё если можно привести код в более правильный вид, то хотелось бы, а то не даёт покоя мысль, что всё печально.