How to toggle a div to expand and shrink it back to original size?

Question

So there are 5 panels of divs in the html. When one of them is clicked, it is supposed to expand to full size and shrink when clicked again. My javascript code is only allowing me to shrink it only for some reason.

This is the html code:

  <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>    
</body>

This is the CSS code:

html {
     box-sizing: border-box;
     background:#ffc600;
     font-family:'Open Sans';
     font-size: 14px;
     font-weight: 400;
}
 body {
     margin: 0;
}
 *, *:before, *:after {
     box-sizing: inherit;
}
 .panels {
     min-height:100vh;
     overflow: hidden;
     display: flex;
}
 .panel {
     background:#6B0F9C;
     box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
     color:white;
     text-align: center;
     align-items:center;
    /* Safari transitionend event.propertyName === flex */
    /* Chrome + FF transitionend event.propertyName === flex-grow */
     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 0.2s;
     font-size: 20px;
     background-size:cover;
     background-position:center;
     flex: 1;
     justify-content: center;
     align-items: center;
     display: flex;
     flex-direction: column;
}
 .panel1 {
     background-image:url(https://source.unsplash.com/8y8DbWwDTz4/1500x1500);
}
 .panel2 {
     background-image:url(https://source.unsplash.com/ZQsKyddXezA/1500x1500);
}
 .panel3 {
     background-image:url(https://source.unsplash.com/cbHtEWXkIdQ/1500x1500);
}
 .panel4 {
     background-image:url(https://source.unsplash.com/FwiNLpZdKVk/1500x1500);
}
 .panel5 {
     background-image:url(https://source.unsplash.com/w8TtcStjyWY/1500x1500);
}
 .panel > * {
     margin:0;
     width: 100%;
     transition:transform 0.5s;
     flex: 1 0 auto;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .panel > *:first-child {
     transform: translateY(-100%);
}
 .panel.open-active > *:first-child {
     transform: translateY(0);
}
 .panel > *:last-child {
     transform: translateY(100%);
}
 .panel.open-active > *:last-child {
     transform: translateY(0);
}
 .panel p {
     text-transform: uppercase;
     font-family: 'Open Sans', cursive;
     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: 3em;
}
 .panel.open {
     font-size:40px;
     flex: 5;
}

And this is my Javascript code:

    const panel = document.querySelectorAll(".panels div");
    for (let p of panel){
        p.addEventListener('click', function(){
            p.classList.toggle('panels');
        })
    }
});

I don't know whats wrong, maybe I'm toggling the wrong class? What if I want to toggle the css class (.panels > *) do I do this? (p.classList.toggle('panels *)? I tried and it doesnt work, please help thanks!

Answer 1

panels is the class on the wrapping div. I think you instead want to toggle the open class (and possibly open-active as well to get the extra text to fly in).

Fiddle: https://jsfiddle.net/b5wa9184/