<header class="banner">
	<h1>NEWS FEED</h1>
</header>
<ol class="activity-feed">
	<li class="feed-item" data-content="&#xf00c;" data-time="3 hours ago" data-color="green">
		<section>
			<input type="checkbox" id="expand_1" name="expand_1" />
			<label for="expand_1">
				<b>Etiam feugiat</b> dolor nec molestie <b>posuere.</b>
			</label>
			<main class="content">
				<blockquote>Duis iaculis commodo condimentum. Donec quis felis libero. Nunc feugiat nisi ut ullamcorper congue. Ut tempus egestas mauris et scelerisque. Sed tincidunt ante ligula, eget pharetra mi pretium eget. Fusce tincidunt, elit blandit semper sollicitudin, sapien lectus lobortis quam, ac bibendum lectus risus quis lectus.</blockquote>
				<blockquote>Duis iaculis commodo condimentum. Donec quis felis libero. Nunc feugiat nisi ut ullamcorper congue. Ut tempus egestas mauris et scelerisque. Sed tincidunt ante ligula, eget pharetra mi pretium eget. Fusce tincidunt, elit blandit semper sollicitudin, sapien lectus lobortis quam, ac bibendum lectus risus quis lectus.</blockquote>
			</main>
		</section>
	</li>
	<li class="feed-item" data-content="&#xf27b;" data-time="3 hours ago" data-color="blue">
		<section>
			<input type="checkbox" id="expand_2" name="expand_2" />
			<label for="expand_2">
				<b>Aliquam</b> non diam <b>consectetur.</b>
			</label>
			<main class="content">
				<p>Duis iaculis commodo condimentum. Donec quis felis libero. Nunc feugiat nisi ut ullamcorper congue.</p>
				<p>Ut tempus egestas mauris et scelerisque. Sed tincidunt ante ligula, eget pharetra mi pretium eget. Fusce tincidunt, elit blandit semper sollicitudin, sapien lectus lobortis quam, ac bibendum lectus risus quis lectus.</p>
			</main>
		</section>
	</li>
	<li class="feed-item" data-content="&#xf004;" data-time="3 hours ago" data-color="red">
		<section>
			<input type="checkbox" id="expand_3" name="expand_3" />
			<label for="expand_3">
				<b>Nullam</b> mollis massa ut <b>egestas viverra.</b>
			</label>
			<main class="content">
				<img src="http://i0.kym-cdn.com/photos/images/facebook/000/232/114/e39.png">
			</main>
		</section>
	</li>
	<li class="feed-item" data-content="&#xf00c;" data-time="3 hours ago" data-color="green">
		<section>
			<label for="expand_4">
				<b>Etiam feugiat</b> dolor nec molestie <b>posuere.</b>
				<br>
				Donec quis felis libero.
				<b>Etiam feugiat</b> dolor nec molestie <b>posuere.</b>
				<br>
				Donec quis felis libero.
				<b>Etiam feugiat</b> dolor nec molestie <b>posuere.</b>
				<br>
				Donec quis felis libero.
			</label>
		</section>
	</li>
	<li class="feed-item" data-content="&#xf0e7;" data-time="3 hours ago" data-color="yellow">
		<section>
			<input type="checkbox" id="expand_5" name="expand_5" />
			<label for="expand_5">
				<b>Pellentesque accumsan</b> ligula a tincidunt <b>venenatis.</b>
			</label>
			<main class="content">
				<h1>BOOM!</h1>
			</main>
		</section>
	</li>
</ol>
body {
	font-family: 'Open Sans', sans-serif;
	font-weight: lighter;
	margin: 0;
	background-color: #fafafa;
}

.banner {
	background: linear-gradient(45deg, #2cb5e8, #47cf73);
	padding: 25px 50px;
	h1 {
		color: white;
		font-weight: normal;
		letter-spacing: 20px;
	}
}

.activity-feed {
	list-style-type: none;
	padding: 0;
	margin: 50px 50px 50px 60px;
	.feed-item {
		position: relative;
		min-height: 60px;
		margin-bottom: 25px;
		padding-left: 30px;
		border-left: 2px solid #ddd;
    &:last-child { border-color: transparent; }
		&:before {
			content: attr(data-time);
			display: flex;
			width: 100px;
			position: absolute;
			text-align: center;
			justify-content: center;
			align-items: center;
			left: -50px;
			top: -22px;
			font-size: 12px;
			color: #999;
		}
    &::after {
      content: attr(data-content);
      display: flex;
			justify-content: center;
			align-items: center;
      position: absolute;
      top: 0;
      left: -21px;
      width: 40px;
      height: 40px;
			font: normal normal normal 14px/1 FontAwesome;
			font-size: inherit;
			text-rendering: auto;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
      border-radius: 50%;
			color: white;
			background-color: #ddd;
		}
		section {
			background-color: white;
			//width: auto;
			//display: inline-block;
			padding: 10px 15px;
			border-radius: 4px;
			border: 1px solid #f0f0f0;
			&:hover {
				box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
				transition: all 0.3s cubic-bezier(.25,.8,.25,1);
			}
			label {
				display: block;
				cursor: pointer;
				// &:after {
				// 	content: "\f067";
				// 	position: absolute;
				// 	right: 20px;
				// 	color: #999;
				// 	font: normal normal normal 14px/1 FontAwesome;
				// 	text-rendering: auto;
				// 	font-size: 20px;
				// 	-webkit-font-smoothing: antialiased;
				// 	-moz-osx-font-smoothing: grayscale;
				// 	transition: all .15s ease-in-out;
				// }
			}
		}
	}
}

input[type="checkbox"] {
	display: none;
	&:checked {
		~ label {
			&:after {
				transform: rotate(45deg);
				color: tomato;
			}
		}
		~ .content {
			max-height: 1000px;
			border-top: 1px solid #f0f0f0;
			padding-top: 10px;
			margin-top: 10px;
			padding: 0 25px;
			transition: max-height .25s ease-in;
		}
	}
}

.content {
	max-height: 0;
	overflow: hidden;
	blockquote {
		position: relative;
		&:before {
			content: '';
			position: absolute;
			left: -25px;
			top: 0;
			height: 100%;
			border-left: 2px solid #fcd000;
		}
	}
}

[data-color=red] { &:after { background-color: #ff3c41 !important; } }
[data-color=blue] { &:after { background-color: #2cb5e8 !important; } }
[data-color=green] { &:after { background-color: #47cf73 !important; } }
[data-color=yellow] { &:after { background-color: #fcd000 !important; } }


// &#xf27b;
// &#xf004;
View Compiled
// The land of NoJS

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.