Author: | haesooKr |
---|---|
Views Total: | 721 views |
Official Page: | Go to website |
Last Update: | February 7, 2020 |
License: | MIT |
Preview:

Description:
A responsive, mobile-friendly accordion-style image gallery built using CSS flexbox and a little bit of JavaScript.
Click the image to expand/collapse the panel. The direction of the accordion gallery will automatically switch to Vertical on mobile.
How to use it:
1. Add panels to the accordion gallery.
<div class="panels"> <div class="panel panel1"> <p>I'm</p> <p>Panel</p> <p>One</p> </div> <div class="panel panel2"> <p>I'm</p> <p>Panel</p> <p>Two</p> </div> <div class="panel panel3"> <p>I'm</p> <p>Panel</p> <p>Three</p> </div> <div class="panel panel4"> <p>I'm</p> <p>Panel</p> <p>Four</p> </div> <div class="panel panel5"> <p>I'm</p> <p>Panel</p> <p>Five</p> </div> </div>
2. The necessary CSS styles for the accordion gallery.
.panels{ display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; overflow: hidden; } .panel{ display: flex; align-items: center; justify-content: center; width: 100vw; flex: 1; transition: font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11); background: yellow; box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1); color: white; font-size: 20px; background-size: cover; background-position: center; } .panel.open{ flex: 5; font-size: 12px; } .panel > *{ transition: transform 0.5s; width: 100%; } .panel > *:first-child{ transform: translateX(-100%); } .panel.open > *:first-child{ transform: translateX(0); } .panel > *:last-child{ transform: translateX(100%); } .panel.open > *:last-child{ transform: translateX(0); } .panel p { text-align: center; text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45); font-size: 1em; } .panel p:nth-child(2){ font-size: 2em; } .panel5 p:nth-child(2){ font-size: 2em; } .panel1{ background-position-y: 20%; } .panel5{ background-position-y: 80%; } @media screen and (min-width: 768px){ .panel1{ background-position-y: 30%; } .panel2{ background-position-y: 35%; } .panel5{ background-position-y: 70%; } } @media screen and (min-width: 1024px){ .panels{ flex-direction: row; } .panel{ flex-direction: column; height: 100vh; } .panel p{ flex: 1; } .panel > *:first-child{ transform: translateX(0); transform: translateY(-100%); } .panel.open > *:first-child{ transform: translateY(0); } .panel > *:last-child{ transform: translateX(0); transform: translateY(100%); } .panel.open > *:last-child{ transform: translateY(0); } .panel > * { display: flex; align-items: center; justify-content: center; transition: transform 0.5s; width: 100%; } .panel.open > *:nth-child(2){ font-size: 70px; } .panel.open > *{ font-size: 40px; } }
3. Add background images to the panels.
.panel1{background-image: url(1.jpg);} .panel2{background-image: url(2.jpg);} .panel3{background-image: url(3.jpg);} .panel4{background-image: url(4.jpg);} .panel5{background-image: url(5.jpg);}
4. The JavaScript to handle the click/tap event.
const panels = document.querySelectorAll('.panel'); function handleClick(){ console.log('Hello'); this.classList.toggle('open'); } panels.forEach(panel => panel.addEventListener('click', handleClick));