<h1>Interactive Panel Elements</h1>

<div class="panel">
	<div class="panel-element">
		<div class="element-actions">
			<button class="btn btn-action btn-hide"><i class="fa fa-ban"></i></button>
			<button class="btn btn-action btn-heart"><i class="fa fa-heart-o"></i></button>
		</div>
		
		<div class="element-content">
			<button class="btn btn-more">
				<i class="fa fa-ellipsis-h icon-closed"></i>
				<i class="fa fa-times icon-open"></i>
				<i class="fa fa-heart-o icon-hearted"></i>
			</button>
			
			<div class="content-post">
				<div class="post-avatar"></div>

				<div class="post-content">
					<span class="post-title">Lorem Ipsum Dolor Sit</span>
					<p class="post-body">Amet consectetur adipiscing elit vestibulum lacinia nibh id sem.</p>
				</div>
			</div>
		</div>
	</div>
	
	<div class="panel-element">
		<div class="element-actions">
			<button class="btn btn-action btn-hide"><i class="fa fa-ban"></i></button>
			<button class="btn btn-action btn-heart"><i class="fa fa-heart-o"></i></button>
		</div>
		
		<div class="element-content">
			<button class="btn btn-more">
				<i class="fa fa-ellipsis-h icon-closed"></i>
				<i class="fa fa-times icon-open"></i>
				<i class="fa fa-heart-o icon-hearted"></i>
			</button>
			
			<div class="content-post">
				<div class="post-avatar"></div>

				<div class="post-content">
					<span class="post-title">Nullam egestas neque et</span>
					<p class="post-body">orci lacinia finibus. Nunc rutrum urna at libero pretium, vel gravid.</p>
				</div>
			</div>
		</div>
	</div>

	<div class="panel-element">
		<div class="element-actions">
			<button class="btn btn-action btn-hide"><i class="fa fa-ban"></i></button>
			<button class="btn btn-action btn-heart"><i class="fa fa-heart-o"></i></button>
		</div>
		
		<div class="element-content">
			<button class="btn btn-more">
				<i class="fa fa-ellipsis-h icon-closed"></i>
				<i class="fa fa-times icon-open"></i>
				<i class="fa fa-heart-o icon-hearted"></i>
			</button>
			
			<div class="content-post">
				<div class="post-avatar"></div>

				<div class="post-content">
					<span class="post-title">Lorem Ipsum Dolor Sit</span>
					<p class="post-body">Amet consectetur adipiscing elit vestibulum lacinia nibh id sem.</p>
				</div>
			</div>
		</div>
	</div>
	
	<div class="panel-element">
		<div class="element-actions">
			<button class="btn btn-action btn-hide"><i class="fa fa-ban"></i></button>
			<button class="btn btn-action btn-heart"><i class="fa fa-heart-o"></i></button>
		</div>
		
		<div class="element-content">
			<button class="btn btn-more">
				<i class="fa fa-ellipsis-h icon-closed"></i>
				<i class="fa fa-times icon-open"></i>
				<i class="fa fa-heart-o icon-hearted"></i>
			</button>
			
			<div class="content-post">
				<div class="post-avatar"></div>

				<div class="post-content">
					<span class="post-title">Nullam egestas neque et</span>
					<p class="post-body">orci lacinia finibus. Nunc rutrum urna at libero pretium, vel gravid.</p>
				</div>
			</div>
		</div>
	</div>

	<div class="panel-element">
		<div class="element-actions">
			<button class="btn btn-action btn-hide"><i class="fa fa-ban"></i></button>
			<button class="btn btn-action btn-heart"><i class="fa fa-heart-o"></i></button>
		</div>
		
		<div class="element-content">
			<button class="btn btn-more">
				<i class="fa fa-ellipsis-h icon-closed"></i>
				<i class="fa fa-times icon-open"></i>
				<i class="fa fa-heart-o icon-hearted"></i>
			</button>
			
			<div class="content-post">
				<div class="post-avatar"></div>

				<div class="post-content">
					<span class="post-title">Lorem Ipsum Dolor Sit</span>
					<p class="post-body">Amet consectetur adipiscing elit vestibulum lacinia nibh id sem.</p>
				</div>
			</div>
		</div>
	</div>
</div>
/* Reset */
@import url(//codepen.io/chrisdothtml/pen/ojLzJK.css);

// Variables
$blue: #34495e;
$red: #e74c3c;

/* Extenders */

.clearfix:after {
	content: '';
	display: table;
	clear: both;
}

.animate {
	transition: all 0.2s;
}

/* General */

button {
	display: block;
	background: transparent;
	border: 0;
	cursor: pointer;
}

h1 {
	display: block;
	background-color: #fff;
	width: 100%;
	line-height: 1;
	margin-bottom: 20px;
	padding: 65px 50px;
	font-weight: 700;
	font-size: 32px;
	color: #6F6F6F;
}

.panel {
	max-width: 450px;
	margin: 0 auto;
	padding: 30px 20px;
	
	.panel-element {
		position: relative;

		.element-content {
			background-color: #fff;
			padding: 15px;
			border-bottom: 1px solid #d6d6d6;
			position: relative;
			right: 0;
			z-index: 2;
			@extend .animate;

			.btn-more {
				width: 30px;
				height: 30px;
				line-height: 30px;
				opacity: 0;
				position: absolute;
				top: 0;
				right: 0;
				@extend .animate;

				> i {
					font-size: 16px;
					color: #929292;
					vertical-align: middle;
				}

				.icon-open,
				.icon-hearted {
					display: none;
				}

				&:hover {
					background-color: #F9F9F9;
				}
			}

			.content-post {
				@extend .clearfix;

				.post-avatar {
					background-color: #ededed;
					width: 60px;
					height: 60px;
					float: left;
					border-radius: 50%;
				}

				.post-content {
					margin-left: 75px;
					padding-top: 9px;

					.post-title,
					.post-body {
						display: block;
					}

					.post-title {
						font-size: 14px;
						color: #AFADAD;
					}

					.post-body {
						margin-top: 5px;
						font-size: 12px;
						color: #CCCBCB;
					}
				}
			}

			&:hover {

				.btn-more {
					opacity: 1;
				}
			}
		}

		.element-actions {
			width: 100px;
			height: 45px;
			font-size: 0;
			position: absolute;
			top: 50%;
			right: 20px;
			z-index: 1;
			transform: translateY(-50%);
			@extend .clearfix;

			.btn-action {
				display: inline-block;
				width: 45px;
				height: 45px;
				border-width: 2px;
				border-style: solid;
				border-radius: 50%;
				@extend .animate;

				> i {
					font-size: 20px;
					@extend .animate;
				}

				&.btn-hide {
					border-color: $blue;

					> i {
						color: $blue;
					}

					&:hover {
						background-color: $blue;
					}
				}

				&.btn-heart {
					border-color: $red;

					> i {
						color: $red;
					}

					&:hover {
						background-color: $red;
					}
				}

				&:not(:last-child) {
					margin-right: 10px;
				}

				&:hover {

					> i {
						color: #fff;
					}
				}
			}
		}
		
		&:not(:first-child) {
			margin-top: 15px;
		}

		&.panel-element-open {

			.element-content {
				right: 140px;

				.btn-more {
					opacity: 1;

					.icon-closed {
						display: none;
					}

					.icon-open {
						display: inline-block;
					}
				}
			}
		}

		&.panel-element-hearted {

			.element-actions {

				.btn-action.btn-heart {
					background-color: $red;

					> i {
						color: #fff;
					}
				}
			}

			.element-content {

				.btn-more {
					opacity: 1;

					> i {
						color: $red;
					}

					.icon-open,
					.icon-closed {
						display: none;
					}

					.icon-hearted {
						display: inline-block;
					}
				}
			}
		}
	}
}

@media screen and (max-width: 500px) {

	h1 {
		margin-bottom: 0;
		padding: 40px;
		font-size: 25px;
	}
	
	.panel {
		
		.panel-element {

			.element-content {

				.btn-more {
					opacity: 1;

					&:hover {
						background-color: transparent;
					}
				}
			}
		}
	}
}
View Compiled
toggleElement = ($el, type) ->

	if type?

		if type is  'open'
			$el.addClass 'panel-element-open'
			$el.siblings('.panel-element').removeClass 'panel-element-open'

		else if type is 'close'
			$el.removeClass 'panel-element-open'

	else

		if $el.hasClass 'panel-element-open'
			toggleElement $el, 'close'
		else
			toggleElement $el, 'open'

	return null

$(document).ready ->

	$('.btn').click ->

		$parent = $(@).parents '.panel-element'

		if $(@).hasClass 'btn-heart'
			
			if $parent.hasClass 'panel-element-hearted'
					$parent.removeClass 'panel-element-hearted'
				else
					$parent.addClass 'panel-element-hearted'
					toggleElement $parent, 'close'

		else if $(@).hasClass 'btn-hide'
			toggleElement $parent, 'close'
			$parent.delay(200).fadeOut(300)

		else if $(@).hasClass 'btn-more'
			if not hammertime
				toggleElement $parent

	if $(window).width() < 800

		# Mobile swiping with Hammer.js
		# https://hammerjs.github.io
		hammertime = $('.panel-element .element-content').hammer()

		hammertime.on 'swipeleft swiperight tap', (e) ->

			$parent = $(e.currentTarget).parent()

			if e.type is 'tap'
				toggleElement $parent

			else if e.type is 'swipeleft'

				if not $parent.hasClass 'panel-element-open'
					toggleElement $parent, 'open'
			else

				if $parent.hasClass 'panel-element-open'
					toggleElement $parent, 'close'
View Compiled
Run Pen

External CSS

  1. https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css
  2. https://fonts.googleapis.com/css?family=Open+Sans:400,600

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min.js
  3. https://cdn.rawgit.com/hammerjs/jquery.hammer.js/master/jquery.hammer.js