JSFiddle - React, Tailwind, and code Playground

by Joshua Powell

HTML

<div class="article">
                <h3>The Psychological Problems of Using Health Care Exchanges</h3>
                <p><em>Behavioral economics uncovers a few hurdles that consumers will face in picking an insurance plan</em><br /><br />By <a href="http://www.usnews.com/topics/author/danielle_kurtzleben" target="blank">DANIELLE KURTZLEBEN</a> - September 26, 2013</p>
                <p>For the first time, consumers will have numerous health insurance options, which could lead to decision paralysis.</p>
                <p>Enrollment in health care exchanges begins on Oct. 1, and for the first time, many customers will face a menu of dozens of plans. According to the Department of Health and Human Services, users of the exchanges will have on average <a href="http://www.hhs.gov/news/press/2013pres/09/20130925a.html" target="blank">53 plan choices</a>.</p>
                <p>Proponents of the system say it will give consumers easy access to new information and insurance options. But some principles of behavioral economics suggest that even if the exchanges have a flawless rollout, consumers could have a bumpy road to choosing their insurance.</p>
                <p>In part, that's because the new bevy of choices could overwhelm consumers, forcing them into bad insurance choices – or even no insurance at all, says one expert.</p>
                <p>"Now people have options that they've never had before," says Douglas Hough, an associate scientist at Johns Hopkins School of Public Health who recently penned "Irrationality in Healthcare," a book about flawed decision-making in the health care marketplace. That creates "more tension and more potential for regret" as consumers fear making the wrong choice with every plan they decide not to pick, he adds. All of those choices could mean consumers make thoughtless choices, or even no choice at all, he says.</p>
                <p>"Now instead of having two choices they have 25 choices. Individuals could just throw up...

CSS

.article {
	text-align: justify;
	height: 100px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 5px;
	border: 2px solid #0c5b78;
	padding: 10px;
	cursor: pointer;
	position: relative;
}

.fullArticle {
	height: auto;
	overflow: none;
	cursor: default;
	position: relative;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 5px;
	border: 2px solid #0c5b78;
	padding: 10px;
	text-align: justify;
}

.close {
	position: absolute;
	right: 10px;
	top: 10px;
	background: #0c5b78;
	color: #fff;
	padding: 5px;
	box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
	cursor: pointer;
}

JavaScript

function newsArticle() { // Articles Functionality
		$('.article').on('click', function() {
			var self = this;
			var button = $('<span />', {
				'class': 'close',
				text: 'Click to minimize article',
				on: {
					click: function (e) {
						e.stopPropagation();
						$(self).stop(true).toggleClass('fullArticle article');
						$(this).remove();
					}
				}
			});
		if(!event) event = window.event;
		if($(event.target).is('.article')) {
			$(this).append(button);
		}
		else if($(event.target).parents().is('.article')) {
        	$(this).append(button);
        }
		
		$(this).removeClass('article').addClass('fullArticle');
		});
	}
	
	newsArticle();