Accordion Style Responsive Photo Gallery In JavaScript

Preview:

Description:

A responsive photo gallery where users can expand & collapse images just like an accordion slider.

How to use it:

1. Add images as background to panels.

<div class="container">
  <div class="panel active" style="background-image:url(img/1.jpg);">
    <h3>CSS Script</h3>
  </div>
  <div class="panel" style="background-image:url(img/2.jpg);">
    <h3>CSS Script</h3>
  </div>
  <div class="panel" style="background-image:url(img/3.jpg);">
    <h3>CSS Script</h3>
  </div>
  <div class="panel" style="background-image:url(img/4.jpg);">
    <h3>CSS Script</h3>
  </div>
  <div class="panel" style="background-image:url(img/5.jpg);">
    <h3>CSS Script</h3>
  </div>
  <div class="panel" style="background-image:url(img/6.jpg);">
    <h3>CSS Script</h3>
  </div>
</div>

2. The necessary CSS styles.

.container
{
  display: flex;
  width: 90vw;
}

.panel
{
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 85vh;
  border-radius: 5px;
  color: #ffffff;
  cursor: pointer;
  flex: .5;
  margin: 10px;
  transition: all 700ms ease-in;
}

.panel h3
{
  font-size: 24px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  margin: 0;
  opacity: 0;
  
}

.panel.active
{
  flex: 5;
}

.panel.active h3
{
  opacity: 1;
  transition: opacity .3s ease-in .4s;
}

@media(max-width:480px)
{
  .container
  {
      width: 100vw;
  }

  .panel:nth-last-of-type(6),
  .panel:nth-last-of-type(7)
  {
      display: none;
  }
}

3. Enable the accordion-style smooth transitions by toggling CSS classes.

const panels = document.querySelectorAll('.panel');
panels.forEach((panel) => {
  panel.addEventListener('click', () => {
    removeActiveClasses();
    panel.classList.add('active');
  });
});
function removeActiveClasses() {
  panels.forEach((panel) => {
    panel.classList.remove('active');
  });
}