jQuery баян с анимированной шкалой времени

Question

Я работаю над jQuery аккордеоном с анимированной шкалой времени. Это почти сделано, но я застрял в строке / анимации на последнем элементе. Вы можете просмотреть рабочий пример: https://tjobtjob.nl/goldstine-sales-en-acquisitie-medewerker/. Пожалуйста, прокрутите вниз до части под названием «Sollicitatieprocedure», почти внизу.

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

Это мой jQuery код:

jQuery.fn.simpleAccordion = function (options){
    options = $.extend ({start: 0, activeClass: 'active'}, options || {});

    return this.each (
        function(){
            var $this = $(this);
            var headers = $this.children('dt');

            headers.next().hide();
            headers.eq(options.start).addClass(options.activeClass).next().show();

            headers.bind ('click',
                function(){
                    var $this = $(this);

                    $this.addClass(options.activeClass)
                    .next().slideDown();

                    $this.siblings('.' + options.activeClass)
                    .removeClass(options.activeClass) 
                    .next().slideUp();
                }
            );
        }
    );
}
$('dl.stappen').simpleAccordion();

И это часть (и) CSS часть:

dl.stappen{
    width: calc(100% - 45px);
    display: inline-block;
    margin: 50px 0 0;
    padding-left: 45px;
    position: relative;

    dt{
        font-weight: 500;
        font-size: 21px;
        margin-top: 15px;
        margin-bottom: 5px;
        cursor: pointer;
        position: relative;

        &:first-of-type{
            margin-top: 0;
        }
        .round{
            position: absolute;
            left: -45px;
            top: 50%;
            transform: translateY(-50%);
            width: 12px;
            height: 12px;
            background: #eee;
            border: 3px solid #dcae23;
            border-radius: 10px;
            z-index: 100;
        }
    }
    dd{
        font-size: 17px;
        line-height: 26px;
        position: relative;

        p{
            margin-bottom: 15px;

            &:last-child{
                margin-bottom: 0;
            }
        }
    }
    &:before{
        background: #dcae23;
        height: calc(100% - 24px);
        width: 3px;
        position: absolute;
        content: "";
        left: 8px;
        top: 8px;
    }
}

Спасибо за помощь!

Обновление: положить его в ручку: https://codepen.io/bureaukamp/pen/ZEGoaQa

Answer 1

Чтобы сделать это лучше и проще, структуру HTML нужно немного обновить. Здесь я завернул каждый элемент аккордеона в .item div.

. Ниже я обновил html, css & js, чтобы он работал при любом динамическом c изменении содержание.

jQuery.fn.simpleAccordion = function(options) {
  options = $.extend({
    start: 0,
    activeClass: "active",
    itemClass: "item"
  }, options || {});

  function updateView(activeItem) {
    var otherItems = activeItem.siblings();
    otherItems
      .removeClass(options.activeClass)
      .children('dd').slideUp();

    activeItem
      .addClass(options.activeClass)
      .children('dd').slideDown();

  }

  return this.each(function() {
    var $this = $(this);

    var itemSelector = "." + options.itemClass;
    var items = $(itemSelector, $this);
    updateView(items.eq(options.start));

    $this.on('click', itemSelector + '>dt', function() {
      var activeItem = $(this).closest(itemSelector);
      if (activeItem.hasClass(options.activeClass)) return;
      updateView(activeItem);
    });

  });
};

$("dl.stappen").simpleAccordion();

dl.stappen {
  display: block;
  margin: 50px 0 0;
}

dl.stappen .item {
  padding-left: 45px;
  position: relative;
}

dl.stappen .item:before {
  background: black;
  width: 3px;
  bottom: -10px;
  position: absolute;
  content: "";
  left: 8px;
  top: 8px;
}

dl.stappen .item:last-of-type:before {
  display: none;
}

dl.stappen .item dt {
  font-weight: 500;
  font-size: 21px;
  margin-top: 15px;
  margin-bottom: 5px;
  cursor: pointer;
  position: relative;
}

dl.stappen .item dt:first-of-type {
  margin-top: 0;
}

dl.stappen .item dt .round {
  position: absolute;
  left: -45px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: #eee;
  border: 3px solid black;
  border-radius: 10px;
  z-index: 100;
}

dl.stappen .item dd {
  font-size: 17px;
  line-height: 26px;
  position: relative;
  margin-left: 40px;
}

dl.stappen .item dd p {
  margin-bottom: 15px;
}

dl.stappen .item dd p:last-child {
  margin-bottom: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<dl class="stappen">
  <div class="item">
    <dt>
      <div class="round"></div>
      Step one
    </dt>
    <dd>
      Step one description. Step one description. Step one description. Step one description. Step one description. Step one description.
    </dd>
  </div>
  <div class="item">
    <dt>
      <div class="round"></div>
      Step two
    </dt>
    <dd>
      Step two description. Step two description. Step two description. Step two description. Step two description.
    </dd>
  </div>
  <div class="item">
    <dt>
      <div class="round"></div>
      Step three
    </dt>
    <dd>
      Step three description. Step three description. Step three description. Step three description. Step three description. Step three description.description.
    </dd>
  </div>
</dl>

Answer 2

Этот пример должен помочь вам. Поиграйте с ослаблениями в css и добавьте их к slideUp() & slideDown(), если хотите.

Это можно сделать, просто добавив и удалив класс при нажатии ...

if ($this.text().trim() == "Step three") {
   $(".stappen").addClass("reduce");
} else {
   $(".stappen").removeClass("reduce");
}

И используя следующее CSS

dl.stappen:before {
  ....
  transition: height linear 400ms;
}
dl.stappen.reduce::before {
  height: calc(64% - 45px);
}

Вам потребуется измените текст в JS и ваш рост в calc соответственно.

jQuery.fn.simpleAccordion = function(options) {
  options = $.extend({ start: 0, activeClass: "active" }, options || {});

  return this.each(function() {
    var $this = $(this);
    var headers = $this.children("dt");

    headers.next().hide();
    headers
      .eq(options.start)
      .addClass(options.activeClass)
      .next()
      .show();

    headers.bind("click", function() {
      var $this = $(this);
      if ($this.text().trim() == "Step three") {
        $(".stappen").addClass("reduce");
      } else {
        $(".stappen").removeClass("reduce");
      }
      $this
        .addClass(options.activeClass)
        .next()
        .slideDown();

      $this
        .siblings("." + options.activeClass)
        .removeClass(options.activeClass)
        .next()
        .slideUp();
    });
  });
};
$("dl.stappen").simpleAccordion();

dl.stappen {
  width: calc(100% - 45px);
  display: inline-block;
  margin: 50px 0 0;
  padding-left: 45px;
  position: relative;
}
dl.stappen dt {
  font-weight: 500;
  font-size: 21px;
  margin-top: 15px;
  margin-bottom: 5px;
  cursor: pointer;
  position: relative;
}
dl.stappen dt:first-of-type {
  margin-top: 0;
}
dl.stappen dt .round {
  position: absolute;
  left: -45px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: #eee;
  border: 3px solid black;
  border-radius: 10px;
  z-index: 100;
}
dl.stappen dd {
  font-size: 17px;
  line-height: 26px;
  position: relative;
}
dl.stappen dd p {
  margin-bottom: 15px;
}
dl.stappen dd p:last-child {
  margin-bottom: 0;
}
dl.stappen:before {
  background: black;
  height: calc(100% - 24px);
  width: 3px;
  position: absolute;
  content: "";
  left: 8px;
  top: 8px;
  transition: height linear 400ms;
}
dl.stappen.reduce::before {
  height: calc(64% - 45px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<dl class="stappen">
  <dt>
    <div class="round"></div>
    Step one
  </dt>

  <dd>
    Step one description. Step one description. Step one description. Step one description. Step one description. Step one description. Step one description. Step one description. Step one description. Step one description. Step one description. Step one description. Step one description. Step one description. Step one description.
  </dd>

  <dt>
    <div class="round"></div>
    Step two
  </dt>

  <dd>
    Step two description. Step two description. Step two description. Step two description. Step two description. Step two description. Step two description. Step two description. Step two description. Step two description. Step two description. Step two description. Step two description. Step two description. Step two description.
  </dd>

  <dt>
    <div class="round"></div>
    Step three
  </dt>

  <dd>
    Step three description. Step three description. Step three description. Step three description. Step three description. Step three description. Step three description. Step three description. Step three description. Step three description. Step three description. Step three description. Step three description. Step three description. Step three description.
  </dd>
</dl>