Как настроить выпадающий список?

Question

У меня есть выпадающий список на сайте http://norum1991.beget.tech/, который при срабатывании ведет себе не так, как нужно мне, а именно:

Выбранный пункт не хочет занимать верхнюю позицию и при этом стрелочка выбора так же не занимает верхнюю позицию.

2)Как сделать так, чтобы список выпадал плавно?

Как убрать серые линии под каждым li?

$('ul.tabs__caption').on('click', 'li:not(.active)', function() {
  $(this)
    .addClass('active').siblings().removeClass('active')
    .closest('div.tabs').find('div.tabs__content').removeClass('open').eq($(this).index()).addClass('open');
});
$('.down, .tabs__caption li').click(function(event) {
  $('.tabs__caption li').toggleClass('open');
});

  .deals-section {
  background: url('../img/lepnina-bg.jpg') center no-repeat;
  background-size: cover;
}

.paint {
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}

.paint ul {
  display: inline-block;
}

.down {
  color: #ff8d2e;
  font-size: 50%;
  cursor: pointer;
}

.tabs__caption li {
  border: 1px solid #CCC;
  background-color: #fff;
  cursor: pointer;
  border-bottom: none;
  display: none;
}

.tabs__caption li.active {
  color: #ff8d2e;
  border-bottom: 1px dashed #ff8d2e !important;
  border: none;
  background: none;
  display: block;
}

.tabs__caption li.open {
  display: block;
  padding: 5px;
}

.tabs__content {
  display: none;
}

.tabs__content.open {
  display: block;
  margin-top: 30px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="deals-section">
  <div class="wrapper">
    <div class="title">
      <span>лучшие предложения</span>
    </div>
    <div class="paint">
      <div class="tabs">
        <ul class="tabs__caption">
          <li class="active">Декоративня краска</li>
          <li>Маслянная краска</li>
          <li>Эмульсионная краска</li>
        </ul>
        <span class="down">&#9660;</span>

        <div class="tabs__content active">
          Это текст ПЕРВОГО таба
        </div>
        <div class="tabs__content">
          Это текст ВТОРОГО таба
        </div>
        <div class="tabs__content">
          Это текст ТРЕТЬЕГО таба
        </div>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как настроить выпадающий список?

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