purecss-components/dist/bundles/accordion.css

Pure.CSS Components is a responsive lib of CSS Only components built to work with Pure.CSS

.pcssc-accordion{list-style:none;font-family:sans-serif;position:relative}.pcssc-accordion:after,.pcssc-accordion:before{content:' ';display:table}.pcssc-accordion:after{clear:both}@media only screen and (min-width:768px){.pcssc-accordion.accordion-tab .accordion-section{display:inline}}@media only screen and (min-width:768px){.pcssc-accordion.accordion-tab .accordion-section .accordion-section-selector:checked~.accordion-section-content{float:left}}.pcssc-accordion.accordion-tab .accordion-section .accordion-section-header{display:inline}.pcssc-accordion[class$=accordion-side] .accordion-section{display:-webkit-flex;display:-ms-flexbox;display:flex}@media only screen and (min-width:320px){.pcssc-accordion[class$=accordion-side] .accordion-section{display:block}}@media only screen and (min-width:768px){.pcssc-accordion[class$=accordion-side] .accordion-section .accordion-section-selector:checked~.accordion-section-content{position:absolute;top:0}}.pcssc-accordion.right-accordion-side .accordion-section{display:block}@media only screen and (min-width:768px){.pcssc-accordion.right-accordion-side .accordion-section{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}}.pcssc-accordion .accordion-section{margin:0;padding:18px 0 4px;display:block}.pcssc-accordion .accordion-section .accordion-section-selector{outline:0}.pcssc-accordion .accordion-section .accordion-section-selector:checked~.accordion-section-content{display:block}.pcssc-accordion .accordion-section .accordion-section-selector:checked+.accordion-section-header{background-color:#fff;color:gray}.pcssc-accordion .accordion-section .accordion-section-header{cursor:pointer;padding:10px;background-color:#d3d3d3;margin-right:-2px;display:block}.pcssc-accordion .accordion-section .accordion-section-content{margin-top:14px;display:none;width:100%}