body { color: #2c3e50; background: #ecf0f1; } h1 { text-align: center; } .half { float: left; width: 50%; padding: 0 1em; } /* Acordeon styles */ .tab { position: relative; margin-bottom: 1px; width: 100%; color: #fff; overflow: hidden; } .tab input { position: absolute; opacity: 0; z-index: -1; } .tab label { position: relative; display: block; padding: 0 0 0 1em; background: #16a085; font-weight: bold; line-height: 3; cursor: pointer; } .blue label { background: #2980b9; } .tab-content { max-height: 0; overflow: hidden; background: #1abc9c; -webkit-transition: max-height .35s; -o-transition: max-height .35s; transition: max-height .35s; } .blue .tab-content { background: #3498db; } .tab-content p { margin: 1em; } /* :checked */ .tab input:checked ~ .tab-content { max-height: 100vh; } /* Icon */ .tab label::after { position: absolute; right: 0; top: 0; display: block; width: 3em; height: 3em; line-height: 3; text-align: center; -webkit-transition: all .35s; -o-transition: all .35s; transition: all .35s; } .tab input[type=checkbox] + label::after { content: “+”; } .tab input[type=radio] + label::after { content: “\25BC”; } .tab input[type=checkbox]:checked + label::after { transform: rotate(315deg); } .tab input[type=radio]:checked + label::after { transform: rotateX(180deg); }