На странице выводят посты в цикле, есть блок в котором находится пост. Нужно по ссылке Показать показать пост полностью. По кнопке скрыть - скрыть пост. Это должно работать независимо от других постов.
$(document).ready(function(){
$('.button').click(function(){
$('.block-preview').toggleClass('opener');
if (!$(this).data('status')) {
$(this).data('status', true).html('СКРЫТЬ');
} else {
$(this).data('status', false).html('ПОКАЗАТЬ ПОЛНОСТЬЮ');
}
});
});
.block-preview {
height: 400px;
overflow: hidden;
position: relative;
border: none!important;
}
.block-preview.opener {
height: auto;
}
.block-preview:after {
content: "";
width: 100%;
left: 0;
position: absolute;
height: 20px;
bottom: 0;
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)),to(rgba(255,255,255,1)));
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}
.block-preview.opener:after {
opacity: 0;
}
<div class="block-preview">
<?php echo $pst->text;?>
</div>
<div class="show-post">
<a id="<?php echo $pst->id;?>" class="button btn-def__open__close btn-night__open__close">ПОКАЗАТЬ ПОЛНОСТЬЮ</a>
</div>
Этот вариант работает но некорректно, Открываем 1 блок затем 2 блок после этого 1 блок показывает неверно..