.ul {
    list-style-type: none;
    padding-left: 10px;
    
}
/*label   afecta a todos los label, con el .label pudes asignarle a un especifico*/
.label {
    background-color: #AAAFAB;
    border-radius: 5px;
    padding: 3px;
    padding-left: 5px;
    color: white;
    width: 100%;
    font-weight: bold;
}

.li {
    margin: 5px;
    padding: 0px;
    border: 1px solid #ABC;
    border-radius: 5px;
    background-color: #f5f3f3;
}
/*afecta a todos los ckeckbox*/
/*input[type=checkbox] {
    display: none;
}*/
/*puedes utilizarlo en un especifico checkbox*/
.checkbox {
    display: none;
}

    .checkbox ~ ul {
        max-height: 0;
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        white-space: nowrap;
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        transition: all 1s ease;
    }

    .checkbox:checked ~ ul {
        max-height: 100%;
        max-width: 100%;
        opacity: 1;
    }

    .checkbox + .label:before {
        transform-origin: 25% 50%;
        border: 8px solid transparent;
        border-width: 8px 12px;
        border-left-color: white;
        margin-left: -20px;
        width: 0;
        height: 0;
        display: inline-block;
        text-align: center;
        content: '';
        color: #AAAFAB;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease;
        position: absolute;
        margin-top: 1px;
    }

    .checkbox:checked + .label:before {
        transform: rotate(90deg);
        /*margin-top: 6px;
                margin-left: -25px;*/
    }