3

На странице выводят посты в цикле, есть блок в котором находится пост. Нужно по ссылке Показать показать пост полностью. По кнопке скрыть - скрыть пост. Это должно работать независимо от других постов.

$(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 блок показывает неверно..

5
  • 1
    Где в HTML .block-preview?
    – adudnik.ru
    11 фев 2020 в 14:15
  • А где блок самого контента? где текст? вместо того, чтобы копировать foreach лучше бы сделали строение как у вас на сайте
    – Arsen
    11 фев 2020 в 14:16
  • @adudnik.ru, прошу прощения, добавил, замылились глаза
    – Alexfixer
    11 фев 2020 в 14:25
  • @Arsen отредактировал вопрос
    – Alexfixer
    11 фев 2020 в 14:26
  • Класс show-post никак не влияет если что
    – Alexfixer
    11 фев 2020 в 14:27

1 ответ 1

2
    $(this).closest('.show-post').prev().toggleClass('opener');

<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">ПОКАЗАТЬ ПОЛНОСТЬЮ</a>
  </div>
</div>


    $(this).closest('.post').find('.block-preview').toggleClass('opener');
3
  • Спасибо, работает)
    – Alexfixer
    11 фев 2020 в 14:54
  • @Alexfixer Пожалуйста. Успехов. Знак "галочка" - слева от ответа.
    – user176262
    11 фев 2020 в 14:55
  • понял, поставил)
    – Alexfixer
    11 фев 2020 в 15:03

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.