Can someone assist me in making it so only one card opens when clicked, rather than all of them opening at once? Additionally, if there is already an open card and I click on another one, the currently open card should close automatically. If you have any examples of similar card designs with a "show more" feature, please share those as well. Would this type of display be suitable for reviews, or would it be better to use a carousel instead? Thank you.
$(document).ready(function() {
var descMinHeight = 20;
var desc = $('.desc');
var descWrapper = $('.desc-wrapper');
// show more button if desc too long
if (desc.height() > descWrapper.height()) {
$('.more-info').show();
}
// When clicking more/less button
$('.more-info').click(function() {
var fullHeight = $('.desc').height();
if ($(this).hasClass('expand')) {
// contract
$('.desc-wrapper').animate({'height': descMinHeight}, 'slow');
}
else {
// expand
$('.desc-wrapper').css({'height': descMinHeight, 'max-height': 'none'}).animate({'height': fullHeight}, 'slow');
}
$(this).toggleClass('expand');
return false;
});
});.container {
display:flex;
flex-wrap:wrap;
}
.desc-wrapper {
margin: 0 auto;
margin-bottom: 0px;
max-height: 50px;
overflow: hidden;
}
.more-info {
display: none;
}
.more-info .less,
.more-info.expand .more {
display: none;
}
.more-info.expand .less {
display: inline;
}
.more-info:focus {
outline: none;
}
span.glyphicon {
margin-left: 3px;
}
figure.snip1204 {
position: relative;
overflow: hidden;
margin: 10px;
min-width: 220px;
max-width: 225px;
width: 100%;
}
figure.snip1204 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="col-xs-12 col-md-4">
<figure class="snip1204">
<blockquote><div class="reviews-body">
<div class="desc-wrapper">
<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore </div>
</div>
<button class="more-info send-btn"><span class="more">More</span><span class="less">Hide</span></button>
</blockquote>
</figure>
</div>
<div class="col-xs-12 col-md-4">
<figure class="snip1204">
<blockquote><div class="reviews-body">
<div class="desc-wrapper">
<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore </div>
</div>
<button class="more-info send-btn"><span class="more">More</span><span class="less">Hide</span></button>
</blockquote>
</figure>
</div>
<div class="col-xs-12 col-md-4">
<figure class="snip1204">
<blockquote><div class="reviews-body">
<div class="desc-wrapper">
<div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore </div>
</div>
<button class="more-info send-btn"><span class="more">More</span><span class="less">Hide</span></button>
</blockquote>
</figure>
</div>
</div>