Need help on a project

New Here ,
Mar 15, 2020 Mar 15, 2020

Copy link to clipboard

Copied

Hi, I am struggling to do something regarding a website id like to make I have a grid system with pictures and when you click on them I want it to enlarge and show description, I have achieved this but now I want it to shrink the picture and center it in the box, however, I cannot seem to get to it center from this, if anyone can help that would be great the code for changing the size is below.

	function Openimg(tabName){
		
		var i, x;
		x = document.getElementsByClassName("Product_img");
		for(i = 0; i < x.length; i++){

			x[i].style.width = "100%";
			x[i].style.height = "80%";

			
		}
		
		document.getElementById(tabName).style.width = "30%";
		document.getElementById(tabName).style.height = "30%";
		document.getElementById(tabName).style.align = "center";

		
	}
TOPICS
Code , How to , Other

Views

1.2K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Mar 16, 2020 Mar 16, 2020

Simple reason why the <h1></h1> is being dragged down when a top margin is appled to the product_wrapper is because you are positioning it absolutely. If there is no reason to do so then dont use position: absolute;

 

The below code shows 2 products per row example:

 

 

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8"> 
 <title>Expand Div</title>
 <style>
* {
box-sizing: border-box;
}
.product_wrapper {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 80%;
margin
...

Likes

Translate

Translate
LEGEND ,
Mar 15, 2020 Mar 15, 2020

Copy link to clipboard

Copied

Is it possible to upload a working example of what you currently have or paste the complete code - html, css, javascript etc in the forum? It might be easier if we can see the complete code, as it is difficult to understand from your post so far exactly what you are trying to do. Sounds like a typical modal window style workflow until you say you want to shrink the image and center it in the box, what box?

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 15, 2020 Mar 15, 2020

Copy link to clipboard

Copied

<?php

$servername = "localhost";
$username = "root";
$password = "";
$dbName = "products";

$conn = mysqli_connect($servername, $username, $password, $dbName);

if($conn->connect_error){
	die($conn->connnect_error);
}

$result = mysqli_query($conn, "SELECT * FROM tshirts");

?>
<!DOCTYPE html>
<div class="maindiv">
	
	<?php 
	
	while($row = mysqli_fetch_array($result)){
	
?>
	

<div style="cursor: pointer;" onclick="Open('<?php echo $row['ID']+1?>'); Openexp('<?php echo $row['ID']+2?>'); Openimg('<?php echo $row['ID']+4?>')" id="<?php echo $row['ID']+2?>" class="Products">
<div class="Product_img" id="<?php echo $row['ID']+4?>" position="relative" ><?php echo '<img src="data&colon;image/jpeg;base64,' . base64_encode($row['Image']) . '" width="100%" height="100%">'?></div>
<div class="ProName"><?php echo $row['Product_Name']?></div>
<div class="ProPrice"><?php echo $row['Product_Price']?></div>	
<div id="<?php echo $row['ID']+1?>"class="desc" style="display:none"><?php echo $row['Product_Description'] ?></div>
</div>

	<?php 
	
	}
	
	?>
</div> 
function Open(tabName){
		var i, x;
		x = document.getElementsByClassName("desc");
		for(i = 0; i < x.length; i++){

			x[i].style.display = "none";
			
		}
		
		document.getElementById(tabName).style.display = "block";
	}
	
	function Openexp(tabName){
		
		var i, x;
		x = document.getElementsByClassName("Products");
		for(i = 0; i < x.length; i++){

			x[i].style.width = "20vw";
			x[i].style.height = "20vw";
			x[i].style.background = "none";
			
		}
		
		document.getElementById(tabName).style.width = "50vw";
		document.getElementById(tabName).style.height = "35vw";
		document.getElementById(tabName).style.backgroundColor = "white";

		
	}
	function Openimg(tabName){
		
		var i, x;
		x = document.getElementsByClassName("Product_img");
		for(i = 0; i < x.length; i++){

			x[i].style.width = "100%";
			x[i].style.height = "80%";

			
		}
		
		document.getElementById(tabName).style.width = "30%";
		document.getElementById(tabName).style.height = "30%";
		document.getElementById(tabName).align = "middle";

		
	}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 15, 2020 Mar 15, 2020

Copy link to clipboard

Copied

Im afraid you're going to have to upload this and post to a url so we can see a working version. It's more complex than I originally thought, with 3 functions applied to one <div> and the products, ids etc generated by php.

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 15, 2020 Mar 15, 2020

Copy link to clipboard

Copied

I see now that you have T-shirts in a SQL database.   The customary procedure is to click the small image on a summary.php page which takes users to the product detail.php page that contains full-sized image, long description, price, add to cart buttons,  etc... from your database.   Maybe I'm missing something but I don't get how or where your JavaScript fits in to that.

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 15, 2020 Mar 15, 2020

Copy link to clipboard

Copied

I dont really see what is supposed to be happening from the code posted either. The code being used is quite outdated, so there are most likely newer and better alternatives like opening a modal window with the information on each product. Im not quite sure why you would want to open a large image then shrink it to 30%, unless its just an effect.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 15, 2020 Mar 15, 2020

Copy link to clipboard

Copied

Some e-com sites, have a close -up image viewer on the product detail page like this. 

https://tinyurl.com/twn66wu

 

JQuery Loupe is similar.

https://redopop.com/loupe/

 

 

 

 

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 16, 2020 Mar 16, 2020

Copy link to clipboard

Copied

Well unless the OP comes back and provides more difinitive information I guess we'll be left guessing. It doesnt sound much like a zoom/maginify image alone feature to me as there is html text also involved and nothing in the code posted  relates to a 3rd party js source or bespoke js/css that would provide a smooth transition.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 16, 2020 Mar 16, 2020

Copy link to clipboard

Copied

Hi, Basically I have a div and inside the div, I have the products name and the products price at the bottom of that div and then I have an image above those e.g

 

Capture1.PNG

And then you click on the div and it expands out and I want it to look like this when it expands.

Capture.PNG

hopefully, this has been explained better.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 16, 2020 Mar 16, 2020

Copy link to clipboard

Copied

Is this what you are looking for, example code below:

 

<!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;
}
.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;
}
</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 product = document.querySelectorAll('.product');
const productImg = document.querySelectorAll('.product_img');
const productDescription = document.querySelectorAll('.product_description');
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');

}
})
</script>
 
 
 </body>
 </html> 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 16, 2020 Mar 16, 2020

Copy link to clipboard

Copied

Hi,

 

Yes, this is exactly what I was looking for and does this work infinitely downwards the screen? and is it easy to paginate, sorry I'm not good at coding just starting out

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 16, 2020 Mar 16, 2020

Copy link to clipboard

Copied

I dont think its going to work well on mobile devices without a lot of extra coding. You really would not want the div to expand wider on a smart phone anyway.

 

I think you should investigate using modal windows where the product information pops up in an overlay window above the grid of products. That is much more controllable on all devices.

 

As for pagination that would need to be executed in php as it seems you are getting all of the information from a database. There are a lot of tutorials on Youtube that explain that process. You can paginate in javascript as well if you bring your information back from the database as a json file but that is another story.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 16, 2020 Mar 16, 2020

Copy link to clipboard

Copied

hi, what if a did a media query. to say if the screen gets to a certain size then it changes it to just be a row of products and then it'll work better on mobile 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 16, 2020 Mar 16, 2020

Copy link to clipboard

Copied

also is there a way to have it so that when its made bigger you can double click the picture to make it in the centre of the screen and darken everything else so that you get a full-sized image and all other images of that product 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 16, 2020 Mar 16, 2020

Copy link to clipboard

Copied

If you mean at mobile device sizes the format changes to a vertical list of products - that can be done with some css and some additional javascript -

 

 

 

 

<!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;
}
</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');

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');
}

})



window.addEventListener('resize', getWindowWidth);
function getWindowWidth() {
const productWrapper = document.querySelector('.product_wrapper');
const windowWidth = window.innerWidth;
if(windowWidth > 768) {
productWrapper.style.flexWrap = "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');
}
})
}

}
</script>
 
 
 </body>
 </html>

 

 

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 16, 2020 Mar 16, 2020

Copy link to clipboard

Copied

hi, this has worked for the list however the div is no longer expanding when I change the size of the window which is understandable however when I enlarge it again, the div isn't changing size upon click. i think it might be a bug

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 16, 2020 Mar 16, 2020

Copy link to clipboard

Copied

also is there a way to make it so when you click away from all of the listings it closes them all

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 16, 2020 Mar 16, 2020

Copy link to clipboard

Copied

You have to refresh your page.  Only developers change screen size.  Real users don't. 

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 16, 2020 Mar 16, 2020

Copy link to clipboard

Copied

Hi, thanks for that information, and what about clicking away to close all the things.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 16, 2020 Mar 16, 2020

Copy link to clipboard

Copied

hi just a couple of things, one how do i make the divs they are in bigger as i am editing the value of width in .product and it isn't doing anything two how do i space them out, so each of them has a margin as again adding margin-right: 10px; in .product isnt working.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 16, 2020 Mar 16, 2020

Copy link to clipboard

Copied

 

As I said on mobile devices you don't want the div to expand sideways, as there is nowhere for it to go.

The below code will expand the div again if you widen the browser window after narrowing it.

 

<!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> 

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 16, 2020 Mar 16, 2020

Copy link to clipboard

Copied

hi, no the other one was fine i meant the div of the actual images, i have expanded them in mobile view but for some reason cant seem to do it in desktop view

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 16, 2020 Mar 16, 2020

Copy link to clipboard

Copied

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> 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 16, 2020 Mar 16, 2020

Copy link to clipboard

Copied

For some reason the post is not going through

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 16, 2020 Mar 16, 2020

Copy link to clipboard

Copied

Test post

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines