windcrack,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.more-opt{
display: none;
}
.more-opt.show{
display: block;
}
.description.hide{
display: none;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var more = document.querySelectorAll(".more-opt"),
body = document.querySelector("body"),
des = document.querySelectorAll(".description"),
details = document.querySelectorAll(".detailed"),
index = 0;
more[index].classList.add("show");
des[index].classList.add("hide");
body.addEventListener("click", function(e) {
var target = e.target;
if (target && target.classList.contains("detailed")) {
var i = [].indexOf.call(details, target);
if (i == index) {
more[index].classList.toggle("show");
des[index].classList.toggle("hide");
}
else {
more[index].classList.remove("show");
des[index].classList.remove("hide");
index = i;
more[index].classList.add("show");
des[index].classList.add("hide");
}
}
})
});
</script>
</head>
<body>
<div class="col-lg-3 col-md-4 col-12" style="justify-content: stretch; display: flex;">
<div class="row m-0">
<div class="col-md-12 col-5 p-0">
<img class="product-img" src="img/towar1.png" alt="Суши">
</div>
<div class="col-md-12 col-7 p-0">
<!-- <div class="product-details"> -->
<div class="d-flex justify-content-between">
<h2 class="product-title">Авокадо2</h2>
<img class="detailed" src="img/q.svg" alt="Вопросик">
</div>
<div class="description block-on-js show-t">
<p class="product-description">Классический японский ролл со свежим авокадо и кунжутом Классический японский ролл со свежим авокадо и кунжутом</p>
</div>
<div class="more-opt product-description">
<p>Калории: 180</p>
<p>Состав: Рис, нори, авокадо.</p>
</div>
<div>
<p class="pt-lg-3 product-price-block">
<span class="">
<span class="weight">1500 г.</span>
<span class="price">1200 р.</span>
</span>
<span>
<a href="#" class="badge badge-warning cart-btn">В корзину</a>
</span>
</p>
</div>
<!-- </div> -->
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-12">
<div class="row m-0">
<div class="col-md-12 col-5 p-0">
<img class="product-img" src="img/towar1.png" alt="Суши">
</div>
<div class="col-md-12 col-7 p-0">
<div class="product-details">
<div class="d-flex justify-content-between">
<h2 class="product-title">Авокадо</h2>
<img class="detailed" src="img/q.svg" alt="Вопросик">
</div>
<div class="">
<div class="description block-on-js">
<p class="product-description">Классический японский ролл со свежим авокадо и кунжутом Классический японский ролл со свежим авокадо и кунжутомКлассический японский ролл со свежим авокадо и кунжутом Классический японский ролл со свежим авокадо и кунжутом</p>
</div>
<div class="more-opt product-description">
<p>Калории: 180</p>
<p>Состав: Рис, нори, авокадо.</p>
</div>
<p class="pt-3 product-price-block">
<span class="">
<span class="weight">1500 г.</span>
<span class="price">1200р.</span>
</span>
<span>
<a href="#" class="badge badge-warning cart-btn">В корзину</a>
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>