javascript クリックしたところにクラスをつけてそれ以外ははずす

前提・実現したいこと

初めて質問します。現在、HTML CSS Javascriptを勉強している初心者です。
jqueryは勉強していないので、javascriptで方法を教えていただけたら幸いです。

画像のアコーディオンのようなものを作っています。
１：画像の文字をクリックすると、画像の要素が展開し画面に広がる。
２：他の要素をクリックするor同じ要素をクリックし直すことで、１：で展開した要素は元のサイズに戻る。
３：２で他の要素をクリックした場合には、２でクリックした要素が画面に広がるようにする。（この時、1で展開した要素は元のサイズに戻っている）

言葉で説明することが難しいのですが、画面に広がっている要素が常に１つのアコーディオンを作っています。

発生している問題・エラーメッセージ

クリックして要素が展開されるところまでは書けたのですが、
展開されている状態で他の場所をクリックしたときの動作がうまくいきません。（どう書いたら良いのか分かりません）

JSの　this.classList.toggle('open')　というところを他の書き方にしなくてはいけないのかなと思っています。
現状はtoggleを使っているので、１つが展開している状態で次の要素をクリックすると、両方にopenというクラスがついてしまい、２つの要素が開いた状態になってしまっています。展開している要素それぞれをクリックしないと閉じません。
openというクラスがついているときに要素が展開されるようになっているので、複数ある要素のクリックされた１つにだけopenというクラスがつくようにしなくてはいけないことは分かります。
その場合はどういうコードを書けば良いのか、教えていただきたいです。
ifやswitchを使うのかなと漠然と思っています。

該当のソースコード

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>flex pannel</title>
  <link href="https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap" rel="stylesheet">
</head>
<body>
<style>

html{
  font-family: 'Amatic SC', cursive;
  font-size: 50px;
  font-weight: 500;
  background-color: bisque;
}

body{
  margin: 0;
}

*, *:before, *:after {
      box-sizing: border-box;
    }

.panels{
  min-height: 100vh;
  overflow: hidden;
  display: flex;
}

.panel{
  background: cornflowerblue;
  color:white;
  background-size: cover;
  background-position: center;
  text-align: center;
  align-items: center;
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: 50px;
  transition: 
  font-size 0.9s cubic-bezier(0.61,-0.19, 0.7,-0.11),
  font-weight 0.9s cubic-bezier(0.61,-0.19, 0.7,-0.11),
  flex 0.9s cubic-bezier(0.61,-0.19, 0.7,-0.11);
}

.panel1 { 
  background-image: url("photo1.jpg");}
.panel2 { background-image:url("photo3.jpg");}
.panel3 { background-image:url("photo4.jpg");}
.panel4 { background-image: url("photo2.jpg");}
.panel5 { background-image: url("photo5.jpg");}

.panel > *{ /*その中の全ての要素に適応*/
margin: 0;
width: 100%;
flex:1 0 auto;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.5s;
cursor: pointer; /*カーソルをポインタに*/
user-select:none; /*なんどもクリックしたときに、文字を選択させない*/
}
.panel > *:first-child{
  transform: translateY(-100%);
  
}
.panel.open-active > *:first-child{
  transform: translateY(0);
  font-size: 80px;
}

.panel > *:last-child{
  transform: translateY(100%);
 
}
.panel.open-active > *:last-child{
  transform: translateY(0%);
  font-size: 80px;
}

.panel.open {
  font-size: 150px;
  font-weight: 550;
  flex: 9;
}
</style>


  <div class="panels">
    <div class="panel panel1">
      <p>Hey</p>
      <p>Let's</p>
      <p>Dance</p>
    </div>
    <div class="panel panel2">
      <p>Give</p>
      <p>Take</p>
      <p>Receive</p>
    </div>
    <div class="panel panel3">
      <p>Experience</p>
      <p>It</p>
      <p>Today</p>
    </div>
    <div class="panel panel4">
      <p>Give</p>
      <p>All</p>
      <p>You can</p>
    </div>
    <div class="panel panel5">
      <p>Life</p>
      <p>In</p>
      <p>Motion</p>
    </div>
  </div>
  
  <script>
    const panels = document.querySelectorAll('.panel');

    function toggleOpen() {
      this.classList.toggle('open');
    }
    function toggleActive(e){
      if(e.propertyName.includes('flex-grow')){
      this.classList.toggle('open-active');
      }
    }
  panels.forEach(panel => panel.addEventListener('click', toggleOpen));
  panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
  </script>
</body>
</html>

拙い質問文で恐縮ですが、どなたか教えていただければと思います。

yambejp

2020/11/04 08:08 編集

panelがopenじゃないとき非表示になるなら、クリックしてopenできませんよね？余談ですがHTML中の「'(シングルクォート)」は「'」を利用してください

m.ts10806

2020/11/04 10:02

コード長いので読んでませんが、デフォルトで全クローズしてターゲットだけオープンすれば良いかと思います

行動規範の内容に同意します

回答2件

const panels = document.querySelectorAll('.panel');

function toggleOpen() {
panels.forEach(panel => panel.classList.remove("open"));
this.classList.add("open");
if(this.classList.contains("open-active")){
this.classList.remove("open");
}
};

function toggleActive(e){
if(e.propertyName.includes('flex-grow')){
this.classList.toggle("open-active");
}
}

panels.forEach(panel => panel.addEventListener('click', toggleOpen));
panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));

投稿2020/11/04 10:22

編集2020/11/04 12:44

rei02

総合スコア1

ベストアンサー

一例です。

Javascript
1        function toggleOpen() {
2            panels.forEach(panel => panel.classList.remove("open"));
3            this.classList.add('open');
4        }