0

Я написал функцию на jquery, которая реализует поведение показать/скрыть текст по клику по кнопке "подробнее". Все работает, но когда на странице 2 подобных блока, то они начинают конфликтовать. Подскажите как можно реализовать поведение, чтобы блоки не зависели друг от друга, если они находятся на одной странице

$('.hidden-btn').on('click', function(e) {
  e.preventDefault();
  $(this).toggleClass('is-active');
  $('.hidden-btn-text').text(
    $('.hidden-btn-text').text() == 'Скрыть' ? 'Подробнее' : 'Скрыть'
  );
  $('.text-block').toggleClass('show');
});
.text-block {
  padding-bottom: 64px;
  position: relative;
  max-width: 552px;
  .hidden {
    margin-top: 32px;
    display: none;
    &-btn {
      position: absolute;
      left: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 500;
      padding: 0;
      background-color: transparent;
      border: none;
      z-index: 2;
      transition: all 0.3s;
      &:hover {
        .hidden-btn-text {
          color: var(--color-orange);
        }
      }
      &-text {
        transition: all 0.3s;
      }
      &-icon {
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background-color: var(--color-yellow);
        border-radius: 50%;
      }
      &.is-active {
        .hidden-btn-icon {
          transform: rotate(45deg);
        }
      }
    }
  }
  &.show {
    .hidden {
      display: block;
    }
    &::after {
      display: none;
    }
  }
  &::after {
    content: '';
    position: absolute;
    left: -32px;
    bottom: 0;
    width: calc(100% + 32px);
    height: 320px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.01) 11.79%, rgba(255, 255, 255, 0.03) 21.38%, rgba(255, 255, 255, 0.07) 29.12%, rgba(255, 255, 255, 0.12) 35.34%, rgba(255, 255, 255, 0.18) 40.37%, rgba(255, 255, 255, 0.25) 44.56%, rgba(255, 255, 255, 0.33) 48.24%, rgba(255, 255, 255, 0.41) 51.76%, rgba(255, 255, 255, 0.5) 55.44%, rgba(255, 255, 255, 0.59) 59.63%, rgba(255, 255, 255, 0.67) 64.66%, rgba(255, 255, 255, 0.76) 70.88%, rgba(255, 255, 255, 0.85) 78.62%, rgba(255, 255, 255, 0.93) 88.21%, #fff 100%);
    pointer-events: none;
    z-index: 1;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-block">
  <h4 class="subtitle mb-3">Lorem title/</h4>
  <h2>
    Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.
  </h2>
  <h4>Заголовок</h4>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes,
    nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellu
  </p>
  <h4>Заголовок</h4>
  <ul>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </li>
    <li>Aenean euismod bibendum laoreet.</li>
    <li>
      Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
    </li>
  </ul>
  <h4>Заголовок</h4>
  <ol>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </li>
    <li>Aenean euismod bibendum laoreet.</li>
    <li>
      Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
    </li>
  </ol>
  <div class="hidden">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes,
      nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellu
    </p>
  </div>
  <button type="button" class="hidden-btn">
                    <span class="hidden-btn-text">Подробнее</span>
                    <span class="hidden-btn-icon">
                      <svg width="8" height="8">
                        <use xlink:href="#plus"></use>
                      </svg>
                    </span>
                  </button>
</div>

1 ответ 1

2

как можно реализовать поведение, чтобы блоки не зависели друг от друга, если они находятся на одной странице

Как вариант - все действия выполнять "относительно родителя". Определить родительский блок с текстом... Далее все поиски "ключевых элементов" выполнять именно в родителе.

$('.hidden-btn').on('click', function(e) {
  e.preventDefault();
  // определить родительский блок
  const op = $(this.closest('.text-block'))
  $(this).toggleClass('is-active');
  const o = op.find('.hidden-btn-text')
  o.text(
    o.text() == 'Скрыть' ? 'Подробнее' : 'Скрыть'
  );
  op.toggleClass('show');
});
.text-block {
  padding-bottom: 64px;
  position: relative;
  max-width: 552px;
  .hidden {
    margin-top: 32px;
    display: none;
    &-btn {
      position: absolute;
      left: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 500;
      padding: 0;
      background-color: transparent;
      border: none;
      z-index: 2;
      transition: all 0.3s;
      &:hover {
        .hidden-btn-text {
          color: var(--color-orange);
        }
      }
      &-text {
        transition: all 0.3s;
      }
      &-icon {
        width: 18px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background-color: var(--color-yellow);
        border-radius: 50%;
      }
      &.is-active {
        .hidden-btn-icon {
          transform: rotate(45deg);
        }
      }
    }
  }
  &.show {
    .hidden {
      display: block;
    }
    &::after {
      display: none;
    }
  }
  &::after {
    content: '';
    position: absolute;
    left: -32px;
    bottom: 0;
    width: calc(100% + 32px);
    height: 320px;
    background: linear-gradient( 180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.01) 11.79%, rgba(255, 255, 255, 0.03) 21.38%, rgba(255, 255, 255, 0.07) 29.12%, rgba(255, 255, 255, 0.12) 35.34%, rgba(255, 255, 255, 0.18) 40.37%, rgba(255, 255, 255, 0.25) 44.56%, rgba(255, 255, 255, 0.33) 48.24%, rgba(255, 255, 255, 0.41) 51.76%, rgba(255, 255, 255, 0.5) 55.44%, rgba(255, 255, 255, 0.59) 59.63%, rgba(255, 255, 255, 0.67) 64.66%, rgba(255, 255, 255, 0.76) 70.88%, rgba(255, 255, 255, 0.85) 78.62%, rgba(255, 255, 255, 0.93) 88.21%, #fff 100%);
    pointer-events: none;
    z-index: 1;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="text-block">
  <h4 class="subtitle mb-3">Lorem title/</h4>
  <h2>
    Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.
  </h2>
  <h4>Заголовок</h4>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes,
    nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellu
  </p>
  <h4>Заголовок</h4>
  <ul>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </li>
    <li>Aenean euismod bibendum laoreet.</li>
    <li>
      Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
    </li>
  </ul>
  <h4>Заголовок</h4>
  <ol>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </li>
    <li>Aenean euismod bibendum laoreet.</li>
    <li>
      Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
    </li>
  </ol>
  <div class="hidden">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes,
      nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellu
    </p>
  </div>
  <button type="button" class="hidden-btn">
                    <span class="hidden-btn-text">Подробнее</span>
                    <span class="hidden-btn-icon">
                      <svg width="8" height="8">
                        <use xlink:href="#plus"></use>
                      </svg>
                    </span>
                  </button>
</div>
<div class="text-block">
  <h4 class="subtitle mb-3">Lorem title/</h4>
  <h2>
    Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.
  </h2>
  <h4>Заголовок</h4>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes,
    nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellu
  </p>
  <h4>Заголовок</h4>
  <ul>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </li>
    <li>Aenean euismod bibendum laoreet.</li>
    <li>
      Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
    </li>
  </ul>
  <h4>Заголовок</h4>
  <ol>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </li>
    <li>Aenean euismod bibendum laoreet.</li>
    <li>
      Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
    </li>
  </ol>
  <div class="hidden">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes,
      nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellu
    </p>
  </div>
  <button type="button" class="hidden-btn">
                    <span class="hidden-btn-text">Подробнее</span>
                    <span class="hidden-btn-icon">
                      <svg width="8" height="8">
                        <use xlink:href="#plus"></use>
                      </svg>
                    </span>
                  </button>
</div>

1
  • Большое спасибо!
    – Smekalinho
    27 июн в 9:52

Ваш ответ

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

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