Плавающая стрелка вслед за классом при переключении по пунктам

Question

Есть список элементов, при клике по которым мы скрываем или открываем дополнительный контент. Сейчас "стрелка вправо" реализована при помощи background-image. Как сделать её плавающей (по вертикали соответственно)? Приветствуется css, javascript.

$(".lsf__tab-item").not(":first").hide();
$(".lsf__wrapper  .lsf__tab").click(function() {
  $(".lsf__wrapper  .lsf__tab").removeClass("active-tab").eq($(this).index()).addClass("active-tab");
  $(".lsf__tab-item").hide().eq($(this).index()).fadeIn()
}).eq(0).addClass("active-tab");

.lsf__tab {
  width: 100px;
  display: inline-block;
}

.lsf__tab {
  width: auto;
  display: inline-block;
  display: block;
  cursor: pointer;
}

.lsf__wrapper {
  display: flex;
}

.tabs {
  background: #EBEBEB;
  padding-right: 40px;
}

.active-tab {
  background-image: url(https://cdn-icons-png.flaticon.com/512/109/109617.png);
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: 20%;
  padding-right: 54px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="lsf__wrapper">
  <div class="tabs">
    <ul class="lsf__tabs-nav">
      <li class="lsf__tab">
        <a href="#tab1">
          <p>Вкладка 1</p>
        </a>
      </li>
      <li class="lsf__tab">
        <a href="#tab2">
          <p>Вкладка 2</p>
        </a>
      </li>
      <li class="lsf__tab">
        <a href="#tab3">
          <p>Вкладка 3</p>
        </a>
      </li>
      <li class="lsf__tab">
        <a href="#tab4">
          <p>Вкладка 4</p>
        </a>
      </li>
    </ul>
  </div>
  <div class="tab_content">
    <div class="lsf__tab-item">
      <ul class="lsf__tab-points">
        <li>
          Текст 1
        </li>
      </ul>
    </div>
    <div class="lsf__tab-item">
      <ul class="lsf__tab-points">
        <li>
          Текст 2
        </li>
      </ul>
    </div>
    <div class="lsf__tab-item">
      <ul class="lsf__tab-points">
        <li>
          Текст 3
        </li>
      </ul>
    </div>
    <div class="lsf__tab-item">
      <ul class="lsf__tab-points">
        <li>
          Текст 4
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

Пример

$(".lsf__tab-item").not(":first").hide();
$(".lsf__wrapper  .lsf__tab").click(function() {
  $(".lsf__wrapper  .lsf__tab").removeClass("active-tab").eq($(this).index()).addClass("active-tab");
  $(".lsf__tab-item").hide().eq($(this).index()).fadeIn()
}).eq(0).addClass("active-tab");

:root {
  --arrow-size: 30px;
  --tab-height: 48px;
}

* {
  box-sizing: border-box;
}



.lsf__wrapper {
  display: flex;
}

.tabs {
  background: #EBEBEB;
}

.lsf__tabs-nav {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
}

.lsf__tab {
  width: auto;
  display: inline-block;
  display: block;
  cursor: pointer;
  padding: 15px 94px 15px 40px;
}

.lsf__tab + .lsf__tab {
  border-top: 1px solid #ccc;
}

.lsf__tab-arrow {
  position: absolute;
  top: 0;
  right: 40px;
  background-image: url(https://cdn-icons-png.flaticon.com/512/109/109617.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: var(--arrow-size) var(--arrow-size);
  width: var(--arrow-size);
  height: var(--arrow-size);
  transition: transform .3s ease;
}

.active-tab:nth-child(1)~.lsf__tab-arrow {
  transform: translateY(calc((var(--tab-height) - var(--arrow-size)) / 2));
}

.active-tab:nth-child(2)~.lsf__tab-arrow {
  transform: translateY(calc(var(--tab-height) + (var(--tab-height) - var(--arrow-size)) / 2));
}

.active-tab:nth-child(3)~.lsf__tab-arrow {
  transform: translateY(calc(var(--tab-height) * 2 + (var(--tab-height) - var(--arrow-size)) / 2));
}

.active-tab:nth-child(4)~.lsf__tab-arrow {
  transform: translateY(calc(var(--tab-height) * 3 + (var(--tab-height) - var(--arrow-size)) / 2));
}

p {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="lsf__wrapper">
  <div class="tabs">
    <ul class="lsf__tabs-nav">
      <li class="lsf__tab">
        <a href="#tab1">
          <p>Вкладка 1</p>
        </a>
      </li>
      <li class="lsf__tab">
        <a href="#tab2">
          <p>Вкладка 2</p>
        </a>
      </li>
      <li class="lsf__tab">
        <a href="#tab3">
          <p>Вкладка 3</p>
        </a>
      </li>
      <li class="lsf__tab">
        <a href="#tab4">
          <p>Вкладка 4</p>
        </a>
      </li>
      <li class="lsf__tab-arrow"></li>
    </ul>
  </div>
  <div class="tab_content">
    <div class="lsf__tab-item">
      <ul class="lsf__tab-points">
        <li>
          Текст 1
        </li>
      </ul>
    </div>
    <div class="lsf__tab-item">
      <ul class="lsf__tab-points">
        <li>
          Текст 2
        </li>
      </ul>
    </div>
    <div class="lsf__tab-item">
      <ul class="lsf__tab-points">
        <li>
          Текст 3
        </li>
      </ul>
    </div>
    <div class="lsf__tab-item">
      <ul class="lsf__tab-points">
        <li>
          Текст 4
        </li>
      </ul>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Плавающая стрелка вслед за классом при переключении по пунктам

Ответы (1 шт):