#expandText {
    content: '\25B6';
    display: none;
    overflow: hidden;
    transition: height 0.5s;
    border-radius:4px;
}


#toggleText {
    display: none;
}
#toggleText:checked ~ #expandText {
    display: block;
}
#toggleText ~ label {
    padding: 10px 18px;
    border-radius: 3px;
    background-color: #755dd5;
    background-image: linear-gradient(-225deg,#999999 35%,#555555);
    font-size: 16px;
    color: white;
    margin: 20px 0;
    cursor: pointer;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);
}
#toggleText ~ label:hover,  #toggleText:checked ~ label{
    background-image: linear-gradient(90deg, #444444 0%, #444444);
}
#toggleText:checked ~ label::before {
    content: "\25BD ";
}
#toggleText ~ label::before {
    content: "\25B6 ";
}