I need a shorter code for showing one and hiding multiple pictures at a time in vanilla JavaScript

Issue

I started coding not long ago. I wrote a function that, when clicked, focuses on 1 of 3 pics and sends other 2 to the bottom of the page. Although I managed to get the code to work, I feel like it can be a whole lot smaller that it is now. I'm starting to get annoyed because I can't seem to find a way to shorten it. Any help?

Here's a codepen link

const container = document.querySelector('.container');
let cards = document.querySelector('.cards');
let card = document.querySelector('.card');
let body = document.body;
let card1 = document.querySelector('.card1');
let card2 = document.querySelector('.card2');
let card3 = document.querySelector('.card3');

function moveImages(e) {
  let v = window.innerWidth;
  let h = window.innerHeight;


  let x = (e.clientX / v) - 0.5
  let y = (e.clientY / h) - 0.5

  cards.style.transform = `translate(${x*4}%, ${y*4}%)`;
}

container.addEventListener('mousemove', e => moveImages(e));


/*function choosePicture(name) {

    if (name) {
        if (document.querySelector('.opened')){
            document.querySelector('.opened').classList.remove('opened');
        } else {
            name.classList.add('opened');
        }
    }
}*/

function choosePicture(name) {

  if (name === card1) {
    if (document.querySelector('.opened')) {
      document.querySelector('.opened').classList.remove('opened');
      card2.classList.remove('moveToBottom');
      card3.classList.remove('moveToBottom');

    } else {
      card1.classList.add('opened');
      card2.classList.add('moveToBottom');
      card3.classList.add('moveToBottom');
    }
  } else if (name === card2) {
    if (document.querySelector('.opened')) {
      document.querySelector('.opened').classList.remove('opened');
      card1.classList.remove('moveToBottom');
      card3.classList.remove('moveToBottom');
    } else {
      card2.classList.add('opened');
      card1.classList.add('moveToBottom');
      card3.classList.add('moveToBottom');
    }
  } else if (name === card3) {
    if (document.querySelector('.opened')) {
      document.querySelector('.opened').classList.remove('opened');
      card1.classList.remove('moveToBottom');
      card2.classList.remove('moveToBottom');
    } else {
      card3.classList.add('opened');
      card1.classList.add('moveToBottom');
      card2.classList.add('moveToBottom');
    }
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: rgb(52, 0, 108);
  background: linear-gradient(0deg, rgba(52, 0, 108, 1) 0%, rgba(123, 0, 255, 1) 100%);
  overflow: hidden;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cards {
  display: flex;
  align-items: center;
  justify-content: center;
  transition-timing-function: ease-in-out;
  touch-action: none;
}

.card {
  height: 400px;
  width: 225px;
  border-radius: 20px;
  cursor: pointer;
  overflow: hidden;
  transition-duration: 0.5s;
  z-index: 999;
}

.img {
  max-width: 100%;
  object-fit: cover;
  border-radius: 20px;
  transition-duration: 0.5s;
  filter: blur(2px);
  cursor: pointer;
}

.card1 {
  transform: rotateZ(-15deg) translateX(20%) translateY(13%);
  z-index: 998;
}

.card3 {
  transform: rotateZ(15deg) translateX(-20%) translateY(13%);
  z-index: 997;
}

.img:hover {
  filter: blur(0);
}

.card1:hover {
  transform: rotateZ(-15.5deg) translateX(18%) translateY(8%);
  scale: 1.02;
}

.card3:hover {
  transform: rotateZ(17deg) translateX(-18%) translateY(8%);
  scale: 1.02;
}

.card2:hover {
  transform: translateY(-3%) rotateZ(2deg);
  scale: 1.02;
}

.opened {
  transform: rotateZ(0deg) translateX(0%) translateY(-7%);
  scale: 1.4;
}

.opened:hover {
  transform: rotateZ(0deg) translateX(0%) translateY(-7%);
  scale: 1.4;
}

.moveToBottom {
  transform: translateY(500%);
}

<div class="container">
  <div class="cards" id="cards">
    <div class="card1 card" onclick="choosePicture(card1)"><img src="https://images.unsplash.com/photo-1604311795833-25e1d5c128c6?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8OSUzQTE2fGVufDB8fDB8fHww" alt="" class="img img1"></div>
    <div class="card2 card" onclick="choosePicture(card2)"><img src="https://images.unsplash.com/photo-1566895291281-ea63efd4bdbc?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fDklM0ExNnxlbnwwfHwwfHx8MA%3D%3D" alt="" class="img img1"></div>
    <div class="card3 card" onclick="choosePicture(card3)"><img src="https://images.unsplash.com/photo-1616578492900-ea5a8fc6c341?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8OSUzQTE2fGVufDB8fDB8fHww" alt="" class="img img1"></div>
  </div>
</div>

I know about this:

function choosePicture(name) {
if (name === card1 || card2 || card3) {
        if (document.querySelector('.opened')){
            document.querySelector('.opened').classList.remove('opened');
            
        } else {
            name.classList.add('opened');
        }
    }
}

... But this only takes care of the first part of the function. How can I send those other 2 pics to the bottom and back using less code? Oh and if it matters, I only know vanilla JS for now :/

Solution

I think iterating through them after having them in an array might help.

Something like this:

const cards = [card1, card2, card3]
function yourFunction(name) {
    cards.forEach(obj => {
      if (name === obj) {
        if (document.querySelector('.opened')){
            document.querySelector('.opened').classList.remove('opened');
        } else {
            name.classList.add('opened');
        }
      } else {
        obj.classList.remove('moveToBottom');
        obj.classList.remove('moveToBottom');
      }
   });
}

Answered By - bunnysapple