JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic"></script>
<div id="text">
	<p>Down inside the computer are three lasers - a red one, a green one, and a blue one. They are powerful enough to make a bright light but not powerful enough to burn through the back of your eyeball and broil your brain, fry your frontals, lase your lobes. <span>As everyone learned in elementary school, these three colors of light can be combined, with different intensities, to produce any color that Hiro's eye is capable of seeing.</span></p>
		
	<p>In this way, <span>a narrow beam of</span> any color can be shot out of the innards of the computer.</p>

	<p>Like it? <span>Cool.</span></p>
</div>

CSS

#text, .show_all {
    margin: 0 auto;
    width: 350px;
}

.show_all {
    text-align: center;
}

#text {
    line-height: 2.4;

    font-family: 'Lora', serif;
}

.fold,
.show_all {
    color: #F3F3F3;
    background-color: #333;
    font-style: normal;
    padding: 10px;

    -webkit-box-shadow: inset 0px 0px 15px 3px rgba(0,0,0,0.4);
    -moz-box-shadow: inset 0px 0px 15px 3px rgba(0,0,0,0.4);
    box-shadow: inset 0px 0px 15px 3px rgba(0,0,0,0.4);

    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

.fold:hover,
.show_all:hover {
    cursor: pointer;
}

JavaScript

$(function() {
    $('span').each( function(){
        $(this).css('display', 'none');
        $(this).addClass('half_hidden');
        $(this).addClass('fold');
        $(this).wrap('<span>');
        $(this).before('<span class="open_layer fold">&nbsp;</span>');
    });

    bindings();    
    
    $('#text').before('<div class="show_all">SHOW ALL</div>');
    $('.show_all').click( function(){
        if($(this).hasClass('active')) {
            $(this).removeClass('active');
            $(this).text('SHOW ALL');
            $('.half_hidden').click();
        } else {
            $(this).addClass('active');
            $(this).text('HIDE ALL');
            $('.open_layer').click();
        }
    });
});

function bindings() {
    $('.open_layer').unbind();
    $('.half_hidden').unbind();
    
    $('.open_layer').click( function(){
      $(this).css('display', 'none');
      $(this).parent().find('.half_hidden').css('display', 'inline');  
    });

    $('.half_hidden').click( function(){
      $(this).css('display', 'none');
      $(this).parent().find('.open_layer').css('display', 'inline');  
    });
}