In this article you will know how to create Image Accordion using HTML CSS and JavaScript. This JavaScript Image Accordion is fully responsive which means you can easily use it in your project
An image accordion is an engaging and visually appealing way to showcase multiple images in a compact space. It allows users to interact with the images by expanding or collapsing them in an accordion-style layout.
Image Accordion HTML CSS
This Image Accordion is made by me for beginners. So if you know basic JavaScript then you can easily create this Accordion Image Gallery.
Here I have used 5 images. Normally the images are small. When you click on the images, the images will enlarge.
See the Pen Untitled by Growthpanda (@Growthpanda) on CodePen.
Hopefully you got a good idea of how this HTML CSS Image Accordion works from the live preview above. I have shared many designs of this type of accordion. Also if you want to create Image Accordion by jQuery then you can get it at this site.
Image Accordion with HTML CSS JavaScript
Now it’s time to know how to make Image Accordion step by step. If you are a beginner then follow this article. But if you just want the code then you will find a download button below the article.
To create this project (Image Accordion using HTML CSS) first you create 3 files for HTML, CSS and JavaScript respectively.
Step 1: Image Accordion HTML Code
Let’s start by setting up the HTML structure for our image accordion. Create a new HTML file and add the following code.
<div class="gallery-container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>Step 2: Accordion CSS
Now, let’s create the styles to give our image accordion a clean and responsive design. Create a new file named “styles.css” and add the following code.
body {
margin: 0;
padding: 0;
}
.gallery-container {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
display: flex;
flex-direction: row;
width: 100%;
height: 80vh;
}
.item {
height: 100%;
cursor: pointer;
}Step 3: Active Image Accordion with JavaScript
Now, let’s add the interactivity this simple image accordion using JavaScript. Create a new file named “script.js” and include the following code.
1. Selecting Elements:
This line selects all elements with the class “item” and stores them in the items variable. These elements are assumed to be the containers for the images.
const items = document.querySelectorAll(".item");2. Image URLs:
An array named imageURLs is created, containing URLs of five different images. These images will be dynamically loaded into the corresponding containers.
let imageURLs = [
"https://groundtutorial.com/wp-content/uploads/2024/01/dog-5.jpg",
"https://groundtutorial.com/wp-content/uploads/2024/01/dog-4.jpg",
"https://groundtutorial.com/wp-content/uploads/2024/01/dog-3.jpg",
"https://groundtutorial.com/wp-content/uploads/2024/01/dog-2.jpg",
"https://groundtutorial.com/wp-content/uploads/2024/01/dog-1.jpg",
];3. Detecting Touch Device:
The isTouchDevice function attempts to create a TouchEvent. If successful, it sets deviceType to “touch,” indicating that the device supports touch events.
If unsuccessful, it sets deviceType to “mouse.” The events object is used to store corresponding start and end events for both touch and mouse interactions.
let deviceType = "";
let events = {
mouse: {
start: "mouseover",
end: "mouseout",
},
touch: {
start: "touchstart",
end: "touchend",
},
};
const isTouchDevice = () => {
try {
document.createEvent("TouchEvent");
deviceType = "touch";
return true;
} catch (e) {
deviceType = "mouse";
return false;
}
};
isTouchDevice();
4. Creating Image Elements:
For each item in the items NodeList, this loop creates an img element, sets its source to the corresponding URL from imageURLs, and applies some styling to ensure the image fills the container while maintaining its aspect ratio.
items.forEach((item, index) => {
let img = document.createElement("img");
img.setAttribute("src", imageURLs[index]);
img.style.width = "100%";
img.style.height = "100%";
img.style.objectFit = "cover";
item.appendChild(img);
});
5. Setting Initial CSS Properties:
Initial CSS properties are set for each item. They start with a flex value of 1, meaning they initially occupy an equal amount of space. The transition property is applied to create a smooth transition effect over 0.8 seconds with an ease timing function.
item.style.flex = "1";
item.style.transition = "flex 0.8s ease";6. Adding Event Listeners:
Event listeners are added for both the start and end events based on the detected deviceType (either “touch” or “mouse”). When a user starts interacting with an item (e.g., hovering with the mouse or touching on a touch device), the item expands (flex: 9). When the interaction ends, the item contracts back to its initial state (flex: 1).
item.addEventListener(events[deviceType].start, () => {
item.style.flex = "9"; // Expand the item
});
item.addEventListener(events[deviceType].end, () => {
item.style.flex = "1"; // Contract the item
});
Hopefully from this article you have learned How to Create Image Accordion using HTML and CSS. Use below download button to download all codes of this Responsive Accordion Photo Gallery. Comment how you like this accordion design.