.accordion { margin-bottom: 0.75em; [type="checkbox"]:checked + label, [type="checkbox"]:checked ~ label:after, [type="checkbox"]:not(:checked) + label, [type="checkbox"]:not(:checked) ~ label:after, [type="radio"]:checked + label, [type="radio"]:checked ~ label:after, [type="radio"]:not(:checked) + label, [type="radio"]:not(:checked) ~ label:after { content: ""; border: 0; background-color: transparent; } [type="checkbox"]:hover:not(:disabled) + label:before, [type="radio"]:hover:not(:disabled) + label:before, [type="radio"]:not(:checked) ~ label:before, [type="checkbox"]:not(:checked) ~ label:before, [type="radio"]:checked ~ label:before, [type="checkbox"]:checked ~ label:before { background-color: transparent; border: 0; content: "+"; font-size: 1.3em; line-height: 1; } [type="checkbox"]:hover:checked + label:before, [type="radio"]:hover:checked + label:before, [type="radio"]:checked ~ label:before, [type="checkbox"]:checked ~ label:before { background-color: transparent; content: "-"; } [type="radio"]:not(:checked) + label, [type="checkbox"]:not(:checked) + label, [type="radio"]:checked + label, [type="checkbox"]:checked + label { padding-left: 20px; } .accordion__copy { display: none; margin-top: 0.75em; } .accordion__toggle:checked ~ .accordion__copy { background-color: $gray-lighter; display: block; padding: 2.5em 1.25em 1em 1.75em; margin: -2.25em 0 2em -0.5em; } }