The progress bar slider when you click the “next” button moves 20% to the right, and the discount amount increases by 2000 rubles, goes to the second question (display: none is assigned to the list with answers; This occurred under the condition that the answer is selected. My option does not work.
<div class="answers" id="answers1"> <ul> <li>Частный дом</li> <li>Дача</li> <li>Производство</li> <li>Отель/гостиница</li> <li>Другое</li> </ul> </div> <div class="sale-line"> <div class="main-line"> <div class="progress-line" id="progress-line"> <span class="salesum">0</span> руб </div> </div> </div> <a href="#" class="next-btn big-link">Дальше</a> <style> .septik-select .sale-line .main-line { position: relative; width: 100%; height: 2px; background-color: #167c80; padding: 0; margin-top: 182px; } .septik-select .sale-line .main-line .progress-line { position: absolute; top: -28px; left: 0%; width: 20%; z-index: 100; border-bottom: 10px solid #167c80; text-align: center; </style> $(document).ready(function(){ var im = 0 $('.septik-select .answers ul li').click(function(event){ event.preventDefault(); im=1; }); var it = 0 $('.septik-select .next-btn').click(function(event){ event.preventDefault(); it = it+2000; $('.septik-select .salesum').html(it); if (im=1 ){ $('.septik-select .progress-line').animate({'left':'+=20%'}) im=0; ;} }); }); 
