Accordion Image Gallery Using HTML,CSS and JavaScript
Welcome to the Codewithrandom blog. In this blog, We learn how we create an Accordion Image Gallery. We use Html, Css, and JavaScript for this Accordion Image Gallery.
I hope you enjoy our blog so let’s start with a basic html structure for an Accordion Image Gallery.
HTML Code For Accordion Image Gallery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Accordion gallery</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div id="bg"></div> <div id="fg"></div> <script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script> <script src="index.js"></script> </body> </html>
There is all the html code for the Accordion Image Gallery. Now, you can see output without css and javascript. Then we write Css for the styling image gallery and give the main Accordion functionality using javascript.
50+ HTML, CSS & JavaScript Projects With Source Code
Output
 |
| Simple Blank Output (we achieve output using css & js) |
CSS Code For Accordion Image Gallery
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
html, body, #fg, #bg {
width:100%;
height:100%;
color:#fff;
font-size:35px;
font-family:'Montserrat', sans-serif;
overflow:hidden;
}
div {
position:absolute;
top:0;
}
sub {
font-size:12px;
display:block;
}
p {
padding:12px;
}Here is our updated output HTML + CSS. but when you see the output you get only a blank screen, because we use javascript for inserting images and functionality. let us write javascript code.
10+ HTML CSS Projects For Beginners with Source Code
Output
 |
| Simple Blank Output (we achieve output js) |
JavaScript Code For Accordion Image Gallery
var imgs = [
'https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=50',
'https://images.unsplash.com/photo-1511576661531-b34d7da5d0bb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=50',
'https://images.unsplash.com/photo-1476610182048-b716b8518aae?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=50',
'https://images.unsplash.com/photo-1502657877623-f66bf489d236?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=50',
'https://images.unsplash.com/photo-1506361797048-46a149213205?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=50'
],
n = imgs.length,
current = n-1,
closedWidth = Math.floor(window.innerWidth/10)
for (var i=0; i<n; i++){
var bgImg = document.createElement('div');
bg.appendChild(bgImg);
gsap.set(bgImg, {
attr:{id:'bgImg'+i, class:'bgImg'},
width:'100%',
height:'100%',
backgroundImage:'url('+imgs[i]+')',
backgroundSize:'cover',
backgroundPosition:'center'
})
var b = document.createElement('div');
fg.appendChild(b);
gsap.fromTo(b, {
attr:{id:'b'+i, class:'box'},
innerHTML:'<p><sub>Fig.</sub> '+(i+1)+'</p>',
width:'100%',
height:'100%',
borderLeft:(i>0)?'solid 1px #eee':'',
backgroundColor:'rgba(250,250,250,0)',
left:i*closedWidth,
transformOrigin:'100% 100%',
x:'100%'
},{
duration:i*0.15,
x:0,
ease:'expo.inOut'
})
b.onmouseenter = b.onclick = (e)=>{
if (Number(e.currentTarget.id.substr(1))==current) return;
var staggerOrder = !!(current < Number(e.currentTarget.id.substr(1)));
current = Number(e.currentTarget.id.substr(1));
gsap.to('.box', {
duration:0.5,
ease:'elastic.out(0.3)',
left:(i)=>(i<=current)? i*closedWidth: window.innerWidth-((n-i)*closedWidth),
x:0,
stagger: staggerOrder? 0.05:-0.05
})
bg.appendChild( document.getElementById('bgImg'+current) )
gsap.fromTo('#bgImg'+current, {opacity:0}, {opacity:1, duration:0.3, ease:'power1.inOut'})
gsap.fromTo('#bgImg'+current, {scale:1.05, rotation:0.05}, {scale:1, rotation:0, duration:1.5, ease:'sine'})
}
}
window.onresize = (e)=>{
closedWidth = Math.floor(window.innerWidth/10)
gsap.set('.box', { x:0, left:(i)=> (i<=current)? i*closedWidth: window.innerWidth-((n-i)*closedWidth) })
}Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)
this is the whole javascript code, also we use Gsap for this hover animation and accordion image gallery effect.
Accordion Image Gallery👇
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
Now we have completed our Accordion Image Gallery. Here is our updated output with html,css, and javascript. Hope you like the Accordion gallery. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Thank you!
In this post, we learn how to create an Accordion Image Gallery Using HTML, CSS, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.
Written by – Code With Random/Anki
Codepen by – Tom Miller
To bad its not working … It opens up a blank page.
How to start whit fig1 instead of fig5 when page loads for the 1st time?
Nvm … i made it work.
how bro