.expandable {
    transition: all 250ms ease-in-out;
}

    .expandable .expand-bar {
        position: absolute;
        display: block;
        left: 0px;
        bottom: 0px;
        background-color: white;
        width: 100%;
        cursor: pointer;
        text-decoration: none;
        font-weight: 500;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 30px;
        font-size: 12px;
        text-transform: uppercase;
        line-height: 20px;
    }

        .expandable .expand-bar::before {
            position: absolute;
            width: 100%;
            height: 20px;
            top: -20px;
            left: 0px;
            display: block;
            content: "";
            background: rgba(237,237,237,0);
            background: -moz-linear-gradient(top, rgba(237,237,237,0) 0%, rgba(255,255,255,0.8) 41%, rgba(255,255,255,1) 70%);
            background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(237,237,237,0)), color-stop(41%, rgba(255,255,255,0.8)), color-stop(70%, rgba(255,255,255,1)));
            background: -webkit-linear-gradient(top, rgba(237,237,237,0) 0%, rgba(255,255,255,0.8) 41%, rgba(255,255,255,1) 70%);
            background: -o-linear-gradient(top, rgba(237,237,237,0) 0%, rgba(255,255,255,0.8) 41%, rgba(255,255,255,1) 70%);
            background: -ms-linear-gradient(top, rgba(237,237,237,0) 0%, rgba(255,255,255,0.8) 41%, rgba(255,255,255,1) 70%);
            background: linear-gradient(to bottom, rgba(237,237,237,0) 0%, rgba(255,255,255,0.8) 41%, rgba(255,255,255,1) 70%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff', GradientType=0 );
        }

        .expandable .expand-bar i {
            transition: all 250ms ease-in-out;
            position: absolute;
            width: 20px;
            height: 20px;
            display: block;
            top: 50%;
            right: 10px;
            margin-top: -10px;
            transform: rotate(-90deg);
            font-size: 0.3rem;
        }

    .expandable.expanded .expand-bar i {
        transform: rotate(90deg);
    }

    .expandable .expand-bar i::before, .expandable .expand-bar i::after {
        position: absolute;
        width: 7px;
        height: 1px;
        background: #1d1d1d;
        content: "";
        left: 5px;
    }

    .expandable .expand-bar i::before {
        transform: rotate(45deg);
        top: 13px;
    }

    .expandable .expand-bar i::after {
        transform: rotate(-45deg);
        top: 8px;
    }