As I said you don't want to expand the div sideways on mobile devices as it has nowhere to go.
The code below will actvate the expanding div for desktop devices, once the window has been narrowed and widened again.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Expand Div</title>
<style>
.product_wrapper {
display: flex;
justify-content: space-between;
width: 80%;
margin: 0 auto;
}
.product {
width: 30%;
background-color: #f2f2f2;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: width 1s ease;
}
@media screen and (max-width: 768px) {
.product {
width: 48%;
margin-bottom: 20px;
}
}
@media screen and (max-width: 480px) {
.product {
width: 100%;
}
}
.product_img {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.product img {
max-width: 100%;
}
.product_description {
display: none;
}
.expand {
width: 50%;
}
.width30 {
width: 30%!important;
}
.showDescription {
display: block;
}
.border {
border: 2px solid red;
}
.wrap {
flex-wrap: wrap;
}
</style>
</head>
<body>
<div class="product_wrapper">
<div class="product">
<div class="product_img">
<img src="https://images.unsplash.com/photo-1456926631375-92c8ce872def">
</div>
<!-- end product image -->
<div class="product_name">
<h3>Leopard</h3>
</div>
<!-- end product name -->
<div class="product_description">
<p>Leopard on tree branch</p>
</div>
<!-- end product_description -->
<div class="product_price">
<span>Not for sale</span>
</div>
<!-- end product_price -->
</div>
<!-- end product -->
<div class="product">
<div class="product_img">
<img src="https://images.unsplash.com/photo-1444464666168-49d633b86797">
</div>
<!-- end product image -->
<div class="product_name">
<h3>King Fisher</h3>
</div>
<!-- end product name -->
<div class="product_description">
<p>King Fisher perched on branch</p>
</div>
<!-- end product_description -->
<div class="product_price">
<span>Not for sale</span>
</div>
<!-- end product_price -->
</div>
<!-- end product -->
<div class="product">
<div class="product_img">
<img src="https://images.unsplash.com/reserve/wrev1ljvQ6KlfyljCQG0_lion.jpg">
</div>
<!-- end product image -->
<div class="product_name">
<h3>Lion</h3>
</div>
<!-- end product name -->
<div class="product_description">
<p>Roaring lion laying on grass</p>
</div>
<!-- end product_description -->
<div class="product_price">
<span>Not for sale</span>
</div>
<!-- end product_price -->
</div>
<!-- end product -->
</div>
<!-- end product wrapper -->
</body>
<script>
const productWrapper = document.querySelectorAll('.product_wrapper');
const product = document.querySelectorAll('.product');
const productImg = document.querySelectorAll('.product_img');
const productDescription = document.querySelectorAll('.product_description');
function expandDiv() {
product.forEach(function(item, index) {
item.onclick = function() {
product.forEach(function(item, index) {
productImg[index].classList.remove('width30');
productDescription[index].classList.remove('showDescription');
item.classList.remove('expand');
})
productImg[index].classList.add('width30');
productDescription[index].classList.add('showDescription');
item.classList.add('expand');
}
})
}
expandDiv();
window.addEventListener('resize', getWindowWidth);
function getWindowWidth() {
const productWrapper = document.querySelector('.product_wrapper');
const windowWidth = window.innerWidth;
if(windowWidth < 768) {
productWrapper.classList.add('wrap');
product.forEach(function(item, index) {
product.forEach(function(item, index) {
productImg[index].classList.remove('width30');
productDescription[index].classList.remove('showDescription');
item.classList.remove('expand');
})
item.onclick = function() {
product.forEach(function(item, index) {
productDescription[index].classList.remove('showDescription');
})
productDescription[index].classList.add('showDescription');
}
})
}
else {
productWrapper.classList.remove('wrap');
expandDiv();
}
}
</script>
</body>
</html>
1 Correct answer
36
Replies
AdChoices