If you have multiple boxes that need to expand or shrink when clicked, a solution is to assign them all the same class - boxExpandable, for example, with an initial width. When a user clicks on a boxExpandable, you can toggle the .expanded class which increases the width.
To show specific content only when a box is expanded, enclose it in a .showWhenExpanded class as demonstrated below.
$(document).ready(function(){
$('.expandableBox').on('click', function(){
$(this).toggleClass('expanded');
});
});
.box {
margin-bottom: 10px;
padding: 15px;
width: 40%;
border: solid 5px goldenrod;
transition: background-color .4s, width .4s;
}
.box:hover {
background-color: #32cd32;
}
.box.expanded {
width: 80%;
}
.showWhenExpanded {
display: none;
}
.box.expanded .showWhenExpanded {
display: inline-block;
}
<script src="//code.jquery.com/jquery.js"></script>
<div class="content">
<div class="box expandableBox">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="showWhenExpanded">Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</span></p>
</div>
<div class="box expandableBox">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="showWhenExpanded">Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</span></p>
</div>
<div class="box expandableBox">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="showWhenExpanded">Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</span></p>
</div>
</div>
For reference, check out this codepen here