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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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