HTML + CSS only Accordion Element (Radio Button)

HTML + CSS only Accordion Element using the Radio Button method

by prince bazawule

HTML

<h1>CSS + HTML only Accordion Element</h1>
<span class="small">Radio button Method</span>
<ul>
	<!-- Accordion Tab -->
    <li>
        <input type="radio" name="reveal" />
        <i></i>
        <h2>What is lorem ipsum?</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, 
        when an unknown printer took a galley of type and scrambled it to make a type 
        specimen book.
            It has survived not only five centuries, but also the leap into electronic 
            typesetting, remaining essentially unchanged. It was popularised in the 
            1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
            and more recently
            with desktop publishing software like Aldus PageMaker including versions of 
            Lorem Ipsum.</p>
    </li>
	<!-- Accordion Tab -->
    <li>
        <input type="radio" name="reveal" />
        <i></i>
        <h2>Where does it come from?</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, 
        when an unknown printer took a galley of type and scrambled it to make a type 
        specimen book.
            It has survived not only five centuries, but also the leap into electronic 
            typesetting, remaining </p>
    </li>
	<!-- Accordion Tab -->
    <li>
        <input type="radio" name="reveal" />
        <i></i>
        <h2>Why do we use it?</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce accumsan 
        augue sit amet vulputate eleifend. Duis porttitor, sem vel maximus egestas, 
        velit nisi dapibus velit, ac commodo turpis turpis faucibus dui. Maecenas 
        commodo interdum metus,
            non ullamcorper dolor elementum in. Nam vitae augue condimentum, rhoncus 
          ...

SCSS

/* variables */

// colours
$white: rgba(254, 255, 250, 1);
$grey: rgba(220, 231, 235, 1);
$lightgrey: rgba(220, 231, 235, 0.25);
$blue: rgba(34, 190, 198, 1);
$black: rgba(48, 69, 92, 0.8);

// fonts
$sans: 'Ubuntu', sans-serif;
$heading: 'Source Sans Pro', sans-serif;

.transition {
  transition: all 0.25s ease-in-out;
}
.flipIn {
  animation: flipdown 0.5s ease both;
}
.no-select {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html {
	width: 100%;
	height: 100%;
	perspective: 900;
	overflow-y: scroll;
	background-color: $grey;
	font-family: $sans;
	font-weight: 300;
	color: $black;
}

body {
	min-height: 0;
	display: inline-block;
	position: relative;
	left: 50%;
	margin: 90px 0;
	transform: translate(-50%, 0);
	box-shadow: 0 10px 0 0 $blue inset;
	background-color: $white;
	max-width: 450px;
	padding: 30px;
	
	// responsive
	@media ( max-width: 550px) {
		box-sizing: border-box;
		transform: translate( 0, 0);
		max-width: 100%;
		min-height: 100%;
		margin: 0;
		left: 0;
	}
}

h1,
h2 {
	color: $blue;
	font-family: $heading;
	font-weight: 700;
}

h1 {
	text-transform: uppercase;
	font-size: 2.5em;
	@extend .flipIn;
}

h2 {
	font-size: 1.5em;
	line-height: 1;
	display: block;
	background-color: $white;
	padding: 0.5em 0.5em;
	margin: 0;
	cursor: pointer;
	@extend .no-select;
}

.small {
	position: relative;
	color: $black;
	font-family: $heading;
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: 0.5em;
	font-weight: 400;
	top: -1em;
}

p {
	margin-top: 0;
	max-height: 0;
	opacity: 0;
	transform: translate( 0, 50%);
}

ul {
	list-style: none;
	perspective: 900;
	padding: 0;
	margin: 2.5em 0 0;
	
	li {
		position: relative;
		padding: 0;
		margin: 0;
		border-top: 1px dotted $grey;
		@extend .flipIn;

		&:nth-of-type(1) {
			animation-delay: 0.5s;
		}

		&:nth-of-type(2)...