Суть проблемы вот в чем. На сайте есть блоки с комментариями, необходимо чтобы эти блоки были в одном общем контейнере и была возможность перелистывать блоки комментариев скроллом слева, при этом комментарии неактивные немного сворачивались, т.е. 1 активный блок полностью раскрыт, еще два сверху и снизу отображают лишь часть и нужно воспользоваться скроллом чтобы их открыть.
Блоки сделаны. Была попытка сделать на css такой функционал, но вышло не особо хорошо, как делать это на js, jquery не понимаю.
Надеюсь на помощь здесь... Заранее спасибо за ответы
<div class="col-12 col-md-8">
<div class="blockfortestimonial">
<div class="testimonial row">
<div class="col-12 namemodel pb-2">CLL0418W-ALMAZ</div>
<div class="col-12 d-flex flex-wrap justify-content-between">
<div class="grade">5</div>
<div class="rating1 align-items-center d-flex">
<span>Дизайн</span>
<div class="star-rating">
<span class="fa fa-star-o" data-rating="1"><i class="ga far fa-star"></i></span>
<span class="fa fa-star-o" data-rating="2"><i class="ga far fa-star"></i></span>
<span class="fa fa-star-o" data-rating="3"><i class="ga far fa-star"></i></span>
<span class="fa fa-star-o" data-rating="4"><i class="ga far fa-star"></i></span>
<span class="fa fa-star-o" data-rating="5"><i class="ga far fa-star"></i></span>
<input type="hidden" name="whatever2" class="rating-value" value="">
</div>
</div>
<div class="rating1 align-items-center d-flex">
<span>Мощность</span>
<div class="star-rating">
<span class="fa fa-star-o" data-rating="1"><i class="ga far fa-star"></i></span>
<span class="fa fa-star-o" data-rating="2"><i class="ga far fa-star"></i></span>
<span class="fa fa-star-o" data-rating="3"><i class="ga far fa-star"></i></span>
<span class="fa fa-star-o" data-rating="4"><i class="ga far fa-star"></i></span>
<span class="fa fa-star-o" data-rating="5"><i class="ga far fa-star"></i></span>
<input type="hidden" name="whatever2" class="rating-value" value="">
</div>
</div>
<div class="rating1 align-items-center d-flex">
<span>Функциональность</span>
<div class="star-rating">
<span class="fa fa-star-o" data-rating="1"><i class="ga far fa-star"></i></span>
<span class="fa fa-star-o" data-rating="2"><i class="ga far fa-star"></i></span>
<span class="fa fa-star-o" data-rating="3"><i class="ga far fa-star"></i></span>
<span class="fa fa-star-o" data-rating="4"><i class="ga far fa-star"></i></span>
<span class="fa fa-star-o" data-rating="5"><i class="ga far fa-star"></i></span>
<input type="hidden" name="whatever2" class="rating-value" value="">
</div>
</div>
<div class="recomend">
<i class="fas fa-thumbs-up"></i> <span>Рекомендует!</span>
</div>
</div>
<div class="col-12 slovo">
<span>Отзыв:</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-12 slovo">
<span>Плюсы:</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-12 slovo">
<span>Минусы:</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-12 d-flex flex-wrap">
<span class="author">Иван Петров</span>
<span class="status">Организация</span>
<div class="date">01.01.2018</div>
</div>
</div>
<div class="testimonial row">
<div class="col-12 namemodel pb-2">CLL0418W-ALMAZ</div>
<div class="col-12 d-flex flex-wrap justify-content-between">
<div class="grade">5</div>
<div class="rating1 align-items-center d-flex">
<span>Дизайн</span>
<div class="star-rating">
<span class="fa fa-star-o" data-rating="1"><i class="ga far fa-star"></i></span>
<span class="fa fa-star-o" data-rating="2"><i class="ga far fa-star"></i></span>
<span class="fa fa-star-o" data-rating="3"><i class="ga far fa-star"></i></span>
<span class="fa fa-star-o" data-rating="4"><i class="ga far fa-star"></i></span>
<span class="fa fa-star-o" data-rating="5"><i class="ga far fa-star"></i></span>
<input type="hidden" name="whatever2" class="rating-value" value="">
</div>
</div>
<div class="rating1 align-items-center d-flex">
<span>Мощность</span>
<div class="star-rating">
<span class="fa fa-star-o" data-rating="1"><i class="ga far fa-star"></i></span>
<span class="fa fa-star-o" data-rating="2"><i class="ga far fa-star"></i></span>
<span class="fa fa-star-o" data-rating="3"><i class="ga far fa-star"></i></span>
<span class="fa fa-star-o" data-rating="4"><i class="ga far fa-star"></i></span>
<span class="fa fa-star-o" data-rating="5"><i class="ga far fa-star"></i></span>
<input type="hidden" name="whatever2" class="rating-value" value="">
</div>
</div>
<div class="rating1 align-items-center d-flex">
<span>Функциональность</span>
<div class="star-rating">
<span class="fa fa-star-o" data-rating="1"><i class="ga far fa-star"></i></span>
<span class="fa fa-star-o" data-rating="2"><i class="ga far fa-star"></i></span>
<span class="fa fa-star-o" data-rating="3"><i class="ga far fa-star"></i></span>
<span class="fa fa-star-o" data-rating="4"><i class="ga far fa-star"></i></span>
<span class="fa fa-star-o" data-rating="5"><i class="ga far fa-star"></i></span>
<input type="hidden" name="whatever2" class="rating-value" value="">
</div>
</div>
<div class="notrecomend">
<i class="fas fa-thumbs-up"></i> <span>Не рекомендует!</span>
</div>
</div>
<div class="col-12 slovo">
<span>Отзыв:</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-12 slovo">
<span>Плюсы:</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-12 slovo">
<span>Минусы:</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-12 d-flex flex-wrap">
<span class="author">Иван Петров</span>
<span class="status">Организация</span>
<div class="date">01.01.2018</div>
</div>
</div>
</div>
</div>
