Показать сообщение отдельно
  #13 (permalink)  
Старый 19.07.2016, 19:06
Аспирант
Отправить личное сообщение для Spass Посмотреть профиль Найти все сообщения от Spass
 
Регистрация: 14.07.2016
Сообщений: 86

.checklist > li.active {
    border-top: 2px solid #0036ff;
    border-bottom: 2px solid #0036ff;
    border-radius: 0;
    color: #000;
}

.checklist li.active:first-child,
.checklist li:not(.active) + li.active {
    border-bottom-left-radius: 50px;
    border-left: 2px solid #0036ff;
    border-top-left-radius: 50px;
}

.checklist li.active:last-child,
.checklist li.right-side {
    border-bottom-right-radius: 50px;
    border-right: 2px solid #0036ff;
    border-top-right-radius: 50px;
}


$('.checklist li').on('click', function(){
                $(this).toggleClass('active');
                $('.checklist li').removeClass('right-side').filter('.active').each(function(){
                    if (!$(this).next().hasClass('active')) {
                        $(this).addClass('right-side');
                    }
                });
            });


Пример https://jsfiddle.net/wtcvhn2z/

8 строчек скрипта
Ответить с цитированием