Как показать/скрыть только один параграф?

116
29 марта 2021, 11:10

Имеется несколько блоков с описанием, которое изначально частично скрыто. Имеется кнопка "показать больше". При нажатии раскрываются все 40 блоков, а нужно, чтобы эта магия js действовала только на конкретный. Посоветуйте что-нибудь, пожалуйста.

<div class="seller-inner-content">
     <div class="seller-desc">
          <h4>Bertos</h4>
          <p>Более 45 лет Berto’s стремится предлагать лучшее шеф-поварам.
             45 лет страсти и внимательного отношения, чтобы предвидеть и удовлетворить требования тех, кто живет кухней высокого уровня.
             Оборудование разработано и испытано для долгого срока службы, не боится времени, только лучшие стали и мастерство техников - вот ингредиенты, которые позволяют видеть время в качестве союзников компании.
             Компания в постоянном росте, которая работает в 100 странах мира и качество для которой является собственной целью.
             </p>
     </div>
     <a href="#showmore" class="showmore">Показать больше</a>
     <button class="seller-button" type="button" data-toggle="modal" data-target="#modal-order">Купить</button>
</div>
<div class="seller-inner-content">
     <div class="seller-desc">
          <h4>Bartscher</h4>
          <p>Bartscher является одним из ведущих предприятий крупной кухни в Европе. Ассортимент продукции включает в себя широкий выбор профессионального оборудования, практических кухонных инструментов и инновационных решений для продуктов. Все, что требуется в современном крупном кухонном бизнесе для эффективной работы.
             С момента основания компании в 1876 году, Bartscher превратился в полноценный центр кулинарии. Оборудование марки Bartscher доступно во многих странах Европы.
             Высокое качество продукции, комплексное обслуживание и инновационный дух – в соответствии с этими принципами работает высоко мотивированная команда по производству оборудования под торговой маркой Bartscher.
             </p>
      </div>
      <a href="#showmore" class="showmore">Показать больше</a>
      <button class="seller-button" type="button" data-toggle="modal" data-target="#modal-order">Купить</button>
 </div>

JS:

$(document).ready(function() {
const par = $('.seller-desc p');
    $('.showmore').click(function () {
        if (par.css('height') === '110px') {
            $(this).text('Скрыть');
            par.animate({
                height: "100%"
            }, 300);
        } else {
            $(this).text('Показать больше');
            par.animate({
                height: "110px"
            }, 300);
        }
    })
})
Answer 1
$('.showmore').click(function() {
    const par = $(this).parent().find('.seller-desc p');
    ...
READ ALSO
gulp watch вылетает с Error [ERR_STREAM_WRITE_AFTER_END]: write after end

gulp watch вылетает с Error [ERR_STREAM_WRITE_AFTER_END]: write after end

Во всех проектах один и тот же gulpfilejs живёт без изменений уже почти год, всё работало прекрасно и буквально вчера таск gulp watch начал вылетать...

100
PACT тестирование

PACT тестирование

Использую @pact-foundation/pact@latest (для быстроты развёртывания моего случая есть простой пример на jest)

100
Анимация прыжка персонажа на блок

Анимация прыжка персонажа на блок

У меня получилось сделать так, чтобы Джек запрыгивал на блок, но никак не получается осуществить его падение, если он с этого блока сходитПоходу,...

106
Как запустить код в VS Code?

Как запустить код в VS Code?

Взялся изучать JS, установил VS CodeНаписал код, однако запустить его не могу

127