How to do the same only for blocks with different id?

The page displays multiple posts, each with its own id, each post there is a block that hides part of the content I need for the id of the post to hide the open part of the content.
foreach ($arr_posts as $pst) {
 ?> 
 <div class="block-preview">
 <?php echo $pst->text;?>
</div>
 <a id="<?php echo $pst->id;?>" class="button btn-def__open__close btn-night__open__close">Show block</a>
<?php } ?>


$(document).ready(function(){

$('.button').click(function(){
$('.block-preview').toggleClass('opener');
 if (!$(this).data('status')) {
 $(this).data('status', true).html('Hide block');
 } else {
 $(this).data('status', false).html('Show block');
}
});

});


.block-preview {
 height: 400px;
 overflow: hidden;
 position: relative;
}
.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;
}
April 7th 20 at 11:07
3 answers
April 7th 20 at 11:09
$('.button').each(function(){
 var button = $(this);

button.off("click").on("click",function(){
$('.block-preview').toggleClass('opener');
 if (!button.data('status')) {
 button.data('status', true).html('Hide block');
 } else {
 button.data('status', false).html('Show block');
}
});
});


something like this...
if 1 click show, then click 2 to show something is incorrect is displayed to hide the block which should be showing and Vice versa - Guiseppe.Weber29 commented on April 7th 20 at 11:12
@Guiseppe.Weber29, if you have clicked on 1, then all all disappeared? - Lincoln40 commented on April 7th 20 at 11:15
@Lincoln40, you need to have each worked separately, and now they switch turns: 1 block open: hide status, block 2 opened(without closing the first) -> first itself is closed and it is to hide your status.... - Guiseppe.Weber29 commented on April 7th 20 at 11:18
@Guiseppe.Weber29, well you didn't show all the layout, in particular what ".block-preview"? Provide code for at least 2-3 blocks, to understand the whole picture - Lincoln40 commented on April 7th 20 at 11:21
@Lincoln40, Added, blocks are created in a loop - Guiseppe.Weber29 commented on April 7th 20 at 11:24
@Guiseppe.Weber29, well, that's not right... are You sure that your .button can not be inside its parent element .block-preview? - Lincoln40 commented on April 7th 20 at 11:27
@Lincoln40, just convenient when all separately..But you can button and in the block-preview stuff. - Guiseppe.Weber29 commented on April 7th 20 at 11:30
April 7th 20 at 11:11
$('.button').click(function(){
$(this)
 .parents('.post') // Container of your post
.find('.block-preview')
.toggleClass('opener');

 if (!$(this).data('status')) {
 $(this).data('status', true).html('Hide block');
 } else {
 $(this).data('status', false).html('Show block');
}
 });
April 7th 20 at 11:13
<div class="post">
 <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">SHOW all</a>
</div>
</div>


$(this).closest('.post').find('.block-preview').toggleClass('opener');

This variant is suggested, working

Find more questions by tags JavaScript