how to connect circles with line vertically if clicked on circle it should fill with color

Question

I want to create structure as shown in the image below with unordered list item if user click on the list item the circle should fill with color. i have created on div inside that i have took list items and inside list span element.I user clicks on first list item the circle should fill with color if i click on another list then it should fill with color just like active or focus on links in menubar

Here is what i have to achieve Here is what i want to achieve

Here what i have tried

    <div class="sizes">
    <ul>
      <li class="dot"><span></span>6"x6" | 599</li>
      <li class="dot"><span></span>12"x12" | 799</li>
      <li class="dot"><span></span>12"x18" | 999</li>
      <li class="dot"><span></span>18"x12" | 799</li>
      <li class="dot"><span></span>16"x20" | 1,399</li>
    </ul>
</div>

css

.shop-all .product-content ul li {
    position:relative;
    font-family: 'Lato';
    font-size: 16px;
    font-weight: bold;
    padding: 10px 0 10px 0;
    cursor: pointer;}

    .shop-all .product-content ul li span {
      border-radius: 50%;
      border: 1px solid #d95d5d;
      padding: 2px 10px;
      margin-right: 10px;
      background-color:#fff;
    }

    .shop-all .product-content ul li span.filled {
        background-color: #d95d5d;
    }

    .shop-all .product-content ul li span:before{
      content:'';
      position:absolute;
      border-left:1px solid #d95d5d;
      top:10px;
      z-index: -1;
      height: 92%;
    }

    .shop-all .product-content ul li:last-child span:before{
     content:none;
    }
     .shop-all .product-content ul li:last-child{
      padding-bottom:0
    }

    .shop-all .product-content ul {
      list-style: none;
    }

jquery

$('.dot').on('click', function(){
  $(this).toggleClass('filled');
});

Answer 1

Here you need to add class on html as per css and use below jquery

 $('.dot').on('click', function(){ $('.dot').children('span').removeClass('filled'); $(this).children('span').toggleClass('filled'); });

 .shop-all .product-content ul li { position:relative; font-family: 'Lato'; font-size: 16px; font-weight: bold; padding: 10px 0 10px 0; cursor: pointer;} .shop-all .product-content ul li span { border-radius: 50%; border: 1px solid #d95d5d; padding: 2px 10px; margin-right: 10px; background-color:#fff; } .shop-all .product-content ul li span.filled { background-color: #d95d5d; } .shop-all .product-content ul li span:before{ content:''; position:absolute; border-left:1px solid #d95d5d; top:10px; z-index: -1; height: 92%; } .shop-all .product-content ul li:last-child span:before{ content:none; } .shop-all .product-content ul li:last-child{ padding-bottom:0 } .shop-all .product-content ul { list-style: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <div class="shop-all"> <div class="product-content"> <ul> <li class="dot"><span></span>6"x6" | 599</li> <li class="dot"><span></span>12"x12" | 799</li> <li class="dot"><span></span>12"x18" | 999</li> <li class="dot"><span></span>18"x12" | 799</li> <li class="dot"><span></span>16"x20" | 1,399</li> </ul> </div> </div>

Answer 2

 jQuery("li").click(function() { jQuery(this).toggleClass("active"); jQuery(this).siblings().removeClass("active"); });

 body { margin:0; padding:0;} .container { width: 600px; } .shop-all .product-content ul li { position:relative; font-family: 'Lato'; font-size: 16px; font-weight: bold; padding: 10px 0 10px 0; cursor: pointer; line-height:16px;} .shop-all .product-content ul li span { border-radius: 50%; border: 1px solid #d95d5d; padding: 0 10px; margin-right: 10px; background-color:#fff; } .shop-all .product-content ul li.active span { background-color: #d95d5d; } .shop-all .product-content ul li.active { color: #d95d5d;} .shop-all .product-content ul li span:before{ content:''; position:absolute; border-left:1px solid #d95d5d; top:10px; z-index: -1; height: 92%; } .shop-all .product-content ul li:last-child span:before{ content:none; } .shop-all .product-content ul li:last-child{ padding-bottom:0 } .shop-all .product-content ul { list-style: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="shop-all"> <div class="product-content"> <ul> <li class="dot"><span></span>6"x6" | 599</li> <li class="dot"><span></span>12"x12" | 799</li> <li class="dot"><span></span>12"x18" | 999</li> <li class="dot"><span></span>18"x12" | 799</li> <li class="dot"><span></span>16"x20" | 1,399</li> </ul> </div> </div> </div>

Answer 3

Since you have created filled class for span you have to try the following way. So change

$('.dot').on('click', function(){
  $(this).toggleClass('filled');
});

To

 $('.dot').on('click', function(){
      $('.dot').find('span').removeClass('filled');
      $(this).find('span').toggleClass('filled');
});

DEMO HERE

Answer 4

Try this..

 $('.dot').on('click', function(){ $(this).toggleClass("filled"); $(this).siblings().removeClass("filled"); });

 body { margin:0; padding:0;} .container {width: 600px;} .shop-all .product-content ul li { position:relative; font-family: 'Lato'; font-size: 16px; font-weight: bold; padding: 10px 0 10px 0; cursor: pointer; line-height:16px;} .shop-all .product-content ul li span { border-radius: 50%; border: 1px solid #d95d5d; padding: 0 10px; margin-right: 10px; background-color:#fff; } .shop-all .product-content ul li.filled span { background-color: #d95d5d; } .shop-all .product-content ul li span:before{ content:''; position:absolute; border-left:1px solid #d95d5d; top:10px; z-index: -1; height: 92%; } .shop-all .product-content ul li:last-child span:before{ content:none; } .shop-all .product-content ul li:last-child{ padding-bottom:0 } .shop-all .product-content ul { list-style: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="shop-all"> <div class="product-content"> <ul> <li class="dot"><span></span>6"x6" | 599</li> <li class="dot"><span></span>12"x12" | 799</li> <li class="dot"><span></span>12"x18" | 999</li> <li class="dot"><span></span>18"x12" | 799</li> <li class="dot"><span></span>16"x20" | 1,399</li> </ul> </div> </div>