тема отрывашка будет вечной ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.product-row:nth-child(n + 5){
display: none;
}
.inner.showAll .product-row {
display: block;
}
.view_all {
cursor: pointer;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var inner = document.querySelectorAll(".inner");
[].forEach.call(inner, function(div) {
div.querySelector(".view_all").addEventListener("click", function() {
div.classList.toggle("showAll")
})
})
});
</script>
</head>
<body>
<div class="inner">
<div class="product-row">Product 1</div>
<div class="product-row">Product 2</div>
<div class="product-row">Product 3</div>
<div class="product-row">Product 4</div>
<div class="product-row">Product 5</div>
<div class="product-row">Product 6</div>
<div class="product-row">Product 7</div>
<div class="product-row">Product 8</div>
<div class="view_all">
<span>View all elements</span>
</div>
</div>
<div class="inner">
<div class="product-row">Product 1</div>
<div class="product-row">Product 2</div>
<div class="product-row">Product 3</div>
<div class="product-row">Product 4</div>
<div class="product-row">Product 5</div>
<div class="product-row">Product 6</div>
<div class="product-row">Product 7</div>
<div class="product-row">Product 8</div>
<div class="view_all">
<span>View all elements</span>
</div>
</div>
</body>
</html>