<div class="container">
	<div class="header">
		<h1>Pure CSS Toggle Lists</h1>
		<p>Click on the buttons below to show additional content. This trick is based on checkboxes and labels.</p>
	</div>
	<!-- Item 1 -->
	<div class="item">
		<input type="checkbox" id="box-1">
		<label for="box-1">Button 1</label>
		<div>
			<h3>Lorem ipsum</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore quo, culpa enim ab esse labore recusandae quis sit molestiae reiciendis praesentium alias accusamus in voluptas atque, iure mollitia neque. Veritatis.</p>
		</div>
	</div>
	<!-- Item 2 -->
	<div class="item">
		<input type="checkbox" id="box-2">
		<label for="box-2">Button 2</label>
		<div>
			<h3>Lorem ipsum</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore quo, culpa enim ab esse labore recusandae quis sit molestiae reiciendis praesentium alias accusamus in voluptas atque, iure mollitia neque. Veritatis.</p>
		</div>
	</div>
	<!-- Item 3 -->
	<div class="item">
		<input type="checkbox" id="box-3">
		<label for="box-3">Button 3</label>
		<div>
			<h3>Lorem ipsum</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore quo, culpa enim ab esse labore recusandae quis sit molestiae reiciendis praesentium alias accusamus in voluptas atque, iure mollitia neque. Veritatis.</p>
		</div>
	</div>
	<!-- Item 4 -->
	<div class="item">
		<input type="checkbox" id="box-4">
		<label for="box-4">Button 4</label>
		<div>
			<h3>Lorem ipsum</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore quo, culpa enim ab esse labore recusandae quis sit molestiae reiciendis praesentium alias accusamus in voluptas atque, iure mollitia neque. Veritatis.</p>
		</div>
	</div>
</div>

<footer>
	Created by Alex Erlandsson<br />
	<a href="https://alexerlandsson.com" target="_blank">alexerlandsson.com</a>
</footer>

/**
 *
 * Pure CSS Toggle List
 * Created by Alex Erlandsson
 * https://alexerlandsson.com
 *
 **/

/* SCSS Variables & Mixins */ 
//variables
$gutter:				15px;
$gutter_half:		$gutter / 2;
$color_primary:	#00c255;
$color_white:		#FFF;
$color_gray:		#808080;
$color_bg:			#f0f0f0;

//Mixins
@mixin font-heading() {
	font-family: 'Indie Flower', sans-serif;
}

@mixin transition($property, $duration, $timing) {
	-webkit-transition: $property $duration $timing;
	-moz-transition: $property $duration $timing;
	-o-transition: $property $duration $timing;
	transition: $property $duration $timing;
}

/* Toggle List */
.container {
	width: 500px;	
	margin: 0 auto;
	text-align: center;
	margin-top: $gutter * 3;
	padding-bottom: $gutter;
	.header {
		width: 100%;
		padding: $gutter * 2 $gutter;
		color: #000;
		margin-bottom: $gutter_half;
		p {
			color: $color_gray;
			margin-bottom: 0;
		}
	}
	.item {
		width: 100%;
		margin-bottom: $gutter_half;
		input[type="checkbox"] {
			display: none;
			&:checked {
				& + label {
					background-color: $color_primary;
					color: $color_white;
					&:after {
						content: "-";
						color: $color_white;
					}
					& + div {
						display: block;
					}
				}
			}
		}
		label {
			display: block;
			width: 100%;
			box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
			position: relative;
			padding: $gutter;
			background-color: $color_white;
			color: #353535;
			cursor: pointer;
			webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
			&:after {
				content: "+";
				font-weight: bold;
				position: absolute;
				right: $gutter;
				color: #353535;
			}
			&:hover {
				background-color: #00c255;
				color: $color_white;
				@include transition(background-color, 100ms, linear);
				&:after {
					color: $color_white;
				}
			}
		}
		div {
			display: none;
			border-top: none;
			padding: $gutter;
			background-color: $color_white;
			//border: 1px solid $color_primary;
			text-align: left;
		}
	}
}

/* Base */
//Note: This CSS is only here for the design
* {
	box-sizing: border-box;
}

html, body {
	height: 100%;
}

body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	background-color: $color_bg;
	margin: 0;
}

h1 {
	@include font-heading;	
}

h3 {
	margin: 0px 0px 15px 0px;
}

a {
	color: inherit;
	text-decoration: none;
}

footer {
	text-align: center;
	color: $color_gray;
	font-size: 12px;
	padding: $gutter * 2;
	a:hover {
		color: $color_primary;
	}
}