I got a section called range-control by default which is hidden. And a checkbox which has ID toggle, once the check box is ticked, the range-control section will show up with animation:

Keep in mind that they have to be siblings:

.range-control {
font-size:16px;

display:none;

animation: 1s fadeIn;
animation-name: fadeInUp;
-webkit-animation-name: fadeInUp;
}

#toggle:checked + .range-control{
display:block;
}