Search code examples
cssuikit

Vertical dashed line in accordion using uikit

        .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>
This code is written in the uikit framework. I want to remove that extra dashed line, and also when it will be updated, the accordion item will show that accordingly.

When I open the accordion it shows the content and the dashed line. When I will add more accordion items, a dashed line shows besides all of them. The dashed line is not responsive when I add more accordion items, it show only half of it. I want to make that dashed line responsive (see the picture). I want to make it like that.

enter image description here

Solution

  • Hope this is what you are looking for. Adjust margin as you want

    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>