JSFiddle - React, Tailwind, and code Playground

by lithium182

HTML

<div class="wrap">
		<ol class="timeline clearfix">
			<li class="event">
				<div class="box"></div>
				<div class="content">
					<div class="content-txt">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, rerum, dignissimos, nulla, incidunt sunt eius perspiciatis obcaecati et laborum dolorum accusantium veniam dolorem autem pariatur aut facere a aliquam magnam.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, rerum, dignissimos, nulla, incidunt sunt eius perspiciatis obcaecati et laborum dolorum accusantium veniam dolorem autem pariatur aut facere a aliquam magnam.</p>
					</div>
					<button>Show</button>
				</div>

			</li>
			<li class="event">
				<div class="box"></div>
				<div class="content">
					<h1>Hello World</h1>
					<div class="content-txt">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, labore, molestiae, fugiat dolor harum recusandae laboriosam quos temporibus sed beatae deserunt nemo error saepe iure odio nisi laborum incidunt fuga.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, labore, molestiae, fugiat dolor harum recusandae laboriosam quos temporibus sed beatae deserunt nemo error saepe iure odio nisi laborum incidunt fuga.</p>
					</div>
					<button>Show</button>
				</div>

			</li>
			<li class="event">
				<div class="box"></div>
				<div class="content">
					<h1>Hello World</h1>
					<div class="content-txt">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, earum est quaerat nemo fuga cumque quibusdam odit veniam? Deleniti, vitae saepe expedita accusamus provident quae autem magnam voluptatum itaque earum.</p>
					</div>
					<button>Show</button>
				</div>

			</li>
			<li class="event">
				<div class="box"></div>
				<div class="content">
					<div class="content-txt">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, tempore, expedita, nam, deserunt...

CSS

html{
	padding: 0;
	margin: 0;
}

ul,ol{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.clearfix:before,
.clearfix:after { 
  content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;
}
.clearfix:after {
  clear: both;
}

.wrap{
	position: relative;
	width: 960px;
	margin: 0 auto;
	padding-top: 50px;
}

.wrap:before {
    background: none repeat scroll 0 0 #CCCCCC;
    content: "";
    display: block;
    height: 100%;
    left: 50%;
    margin-left: -1.5px;
    position: absolute;
    top: 26px;
    width: 2px;
    z-index: -1;
}

.content{
	background: #ccc;
	padding: 10px;
	position: relative;
}

.event{
	position: relative;
}

button{
	position: relative;
	z-index: 1;
}

.box{
	width: 20px;
	height: 20px;
	display: block;
	position: absolute;
	background: #000;
	left: 50%;
	top: 0;
	margin-left: -10px;
}
.pos-left .content {
    float: left;
    width: 43%;
}

.pos-left .content:before{
	width: 0; 
	height: 0; 
	border-top: 0;
	border-bottom: 20px solid transparent;
	border-left: 20px solid #ccc;
	position: absolute;
	right: -10px;
	top: 10px;
	display: block;
	content:"";
}

.pos-right .content:before{
	width: 0; 
	height: 0; 
	border-top: 0;
	border-bottom: 20px solid transparent;
	border-right: 20px solid #ccc;
	position: absolute;
	left: -10px;
	top: 10px;
	display: block;
	content:"";
}

.pos-right .content {
    float: right;
    width: 43%;
}

.event:before,
.event:after { 
  content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;
}
.event:after {
  clear: both;
}

.timeline .event{
	margin-top: -40px;
}

.timeline .event:first-child{
	margin-top: 0;
}


a{
	display: block;
}

h1{
	font-size: 24px;
}

h2{
	font-size: 20px;
}

JavaScript

$(document).ready(function(){

		$('.timeline .event:odd').addClass('pos-right');
		$('.timeline .event:even').addClass('pos-left');

		function excerpt(str, nwords) {
		    var words = str.split(' ');
		    words.splice(nwords, words.length - 1);
		    return words.join(' ') + '&hellip;';
		}

		var div = $('.content-txt');
		var excerpt = excerpt(div.text(), 25);

		div.data('html', div.html()).html( excerpt );
		    
		$('button').click(function() {
		    var isHidden = $(this).text() == 'Show';
		    $(this).siblings('.content-txt').html( isHidden ? div.data('html') : excerpt);
		    $(this).text( isHidden ? 'Hide' : 'Show' );
		});
	});