Вертикальная пунктирная линия в аккордеоне с использованием uikit

Question

        .itinerary-item-span-a::before{
                display: block;
              height: 30px;
              width: 30px;
              text-align: center;
              vertical-align: middle;
              border-radius: 50%;
              background:green ;
              color: #fff;
              line-height: 30px;
              z-index: 1;
              position: relative;
        }



.itinerary-list-item ::after{
border-right: 2px dotted #000;
color: #434f29;
height: 100%;
content: "";
left: -98%;
position: absolute;
top: 16px;
width: 100%;


}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<ul uk-accordion>
    <li class="itinerary-list-item">
        <a class="uk-accordion-title" href="#"><span><i class="fas fa-map-marker-alt uk-margin-large-right itinerary-item-span-a small"></i></span>Item 1</a>
        <div class="uk-accordion-content">
            <p class="uk-margin-large-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li class="itinerary-list-item">
        <a class="uk-accordion-title" href="#"><span><i class="fas fa-map-marker-alt uk-margin-large-right itinerary-item-span-a small"></i></span>Item 2</a>
        <div class="uk-accordion-content">
            <p class="uk-margin-large-left">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li >
        <a class="uk-accordion-title" href="#"><span><i class="fas fa-map-marker-alt uk-margin-large-right itinerary-item-span-a small"></i></span>Item 3</a>
        <div class="uk-accordion-content">
            <p class="uk-margin-large-left">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

Этот код написан в фреймворке uikit.Я хочу удалить эту лишнюю пунктирную линию, а также, когда она будет обновлена, элемент аккордеона покажет это соответственно.

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

Answer 1

Надеюсь, это то, что вы ищете.Отрегулируйте поля, как вы хотите

li div.uk-accordion-content{
border-left: 3px dotted red;
margin-top:0 ;
margin-left:14px
}

$(document).ready(function(){
  $(".uk-accordion-title").click(function(){ 
  $(".itinerary-list-item").removeClass("show")
  $(this).parents(".itinerary-list-item").toggleClass("show");
  });
});

.itinerary-item-span-a::before{
                display: block;
              height: 30px;
              width: 30px;
              text-align: center;
              vertical-align: middle;
              border-radius: 50%;
              background:green ;
              color: #fff;
              line-height: 30px;
              z-index: 1;
              position: relative;
        }


li div.uk-accordion-content{
border-left: 3px dotted red;
margin-top:0 ;
margin-left:14px
}

.uk-accordion li:last-child .uk-accordion-content{
border-left: none}

.uk-accordion li:before{
      content: "";
    border-left: 3px dotted red;
    position: absolute;
    /* top: 0; */
    width: 100px;
    height: 44px;
    left: 14px;
    /* bottom: 0px; */
    transform: translateY(0px);

}

.uk-accordion li.show:before{
display:none}

.uk-accordion li{position:relative}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<ul uk-accordion>
    <li class="itinerary-list-item">
        <a class="uk-accordion-title" href="#"><span><i class="fas fa-map-marker-alt uk-margin-large-right itinerary-item-span-a small"></i></span>Item 1</a>
        <div></div>
        <div class="uk-accordion-content">
            <p class="uk-margin-large-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li class="itinerary-list-item">
        <a class="uk-accordion-title" href="#"><span><i class="fas fa-map-marker-alt uk-margin-large-right itinerary-item-span-a small"></i></span>Item 2</a>
        <div class="uk-accordion-content">
            <p class="uk-margin-large-left">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li >
        <a class="uk-accordion-title" href="#"><span><i class="fas fa-map-marker-alt uk-margin-large-right itinerary-item-span-a small"></i></span>Item 3</a>
        <div class="uk-accordion-content">
            <p class="uk-margin-large-left">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>