<h1>Click Any Pill to Expand</h1>
<div class="wrapper">
<div class="expander">
	<div class="close">X</div>
</div>
<div class="expander">
	<div class="close">X</div>
</div>
<div class="expander">
	<div class="close">X</div>
</div>
</div>

.expander {
	width:50px;
	height:40vh;
	border-radius:25px;
	background:black;
	overflow:hidden;
	margin-top:20px;
	margin-left:20px;
}

html, body {
	width:100%;
	height:100%;
	overflow:hidden;
	margin:0;
}

.wrapper {
	height:100%;
	width:100%;
	background:#1d1d1d;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direation:rows;
}

.close {
	font-family:sans-serif;
	font-size:18px;
	line-height:40px;
	transform:translate(155px, 5px);
	background:rgba(255,255,255,0.6);
	border-radius:20px;
	height:40px;
	width:40px;
	text-align:center;
	cursor:pointer;
	box-shadow:1px 1px 4px #333;
}

h1 {
	position:fixed;
	text-align:center;
	width:100%;
	font-family:Kanit, sans-serif;
	font-weight:400;
	color:#ededed;
}

// learn all my GreenSock tricks at
// http://www.creativeCodingClub.com
// access the world's larest collection of premium GreenSock tutorials


let expanders = gsap.utils.toArray(".expander")
let active // keep track of which expander is open
expanders.forEach(function(expander, index){
	let close = expander.querySelector(".close")
	//create animation for each expander
	let animation = gsap.timeline({paused:true})
	animation.to(expander, {width:200, duration:0.4})
	animation.from(close, {opacity:0, duration:0.1, scale:0.4, x:"-=10"}, "-=0.1")
	//apply the timeline animation to an animation property on the expander
	expander.animation = animation
	expander.addEventListener("click", function() {
		if(active) {
			//close the active expander if there is one by reversing it
			active.animation.reverse()
		}
		expander.animation.play()
		active = expander
	})
	//close this expander by reversing the animation
	close.addEventListener("click", function(event) {
		event.stopPropagation()
		expander.animation.reverse()
	})
})

// learn all my GreenSock tricks at
// http://www.creativeCodingClub.com
// access the world's larest collection of premium GreenSock tutorials


gsap.set(".expander", {backgroundColor:gsap.utils.wrap(["#f5ce5b", "#c570b6", "#78d6e0"])})