How to open just one card?

Question

Please help me open only one card when I click on it (all of them open at once now) and if there is one open, but I click on the other, then the open card closes and the one I clicked opens. Or if you have similar examples of cards that use "show more", I would appreciate an example. Is it convenient to use this display for reviews, or do I need to use a carousel? Thanks.

$(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>

Answer 1

You can get the parent an then find the children with selector:

$(this).parent().children('.desc-wrapper') // ...

$(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
      $(this).parent().children('.desc-wrapper').animate({'height': descMinHeight}, 'slow');
    }
    else {
      // expand 
      $(this).parent().children('.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>