JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="ttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

		<div class="col-sm-3" id="livro1">
			<h2>Capa do livro 1</h2>
		  <span class="resultado">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar eleifend iaculis. Praesent in eros ornare, fringilla neque vitae, eleifend diam. Aliquam lorem sapien, aliquet nec pulvinar eget, sollicitudin eu arcu. Nam dictum rhoncus dolor. Suspendisse non fermentum diam, id laoreet justo. Pellentesque arcu dolor, consequat a leo vitae, iaculis dictum mauris. In vehicula ex vitae consequat vestibulum. Nulla facilisi.

</span>
		</div>

		<div class="col-sm-3">
			<h2>Capa do livro 2</h2>
			 <span class="resultado">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar eleifend iaculis. Praesent in eros ornare, fringilla neque vitae, eleifend diam. Aliquam lorem sapien, aliquet nec pulvinar eget, sollicitudin eu arcu. Nam dictum rhoncus dolor. Suspendisse non fermentum diam, id laoreet justo. Pellentesque arcu dolor, consequat a leo vitae, iaculis dictum mauris. In vehicula ex vitae consequat vestibulum. Nulla facilisi.
</span>
		</div>

		<div class="col-sm-3">
			<h2>Capa do livro 3</h2>
			 <span class="resultado">a</span>
		</div>

		<div class="col-sm-3">
			<h2>Capa do livro 4</h2>
			 <span class="resultado">a</span>
		</div> 
		<div class="clearfix visible-sm-block visible-md-block visible-lg-block"></div>
		<div class="col-sm-3">
			<h2>Capa do livro 5</h2>
			 <span class="resultado">a</span>
		</div>

CSS

.open {display: block;}
.close {display: none}
.col-sm-3 {width: 25%;float:left}
.clearfix{clear:left}

JavaScript

$(document).ready(function() {
              $('.resultado').addClass('close');
			  $('.col-sm-3').click(function(e) {
			  	
			  	var result = $(this).find('.resultado');

			  	if($(result).hasClass('open')) {
			      $(result).removeClass('open');
			      $(result).addClass('close');
			    }
			    else {
			    $('.resultado').not($(result)).removeClass('open');
			     $('.resultado').not($(result)).addClass('close');
			     $(result).removeClass('close');
			      $(result).addClass('open');
			       
			    }

			  });
			});