Hood'm

by ClarenceDowns

HTML

<body>
    
    <div id="content">

   <header>
      HOOD'M
   </header>

   <div id="one">
      <div>
         <span class="pin">🖈</span>
         <p class="cat">ONE</p>
         <span class="burger" id="icon-one">☰</span>
      </div>
      <div class="tab-close">
         <ul class="list">
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
         </ul>
         <ul class="list">
            <li>item 5</li>
            <li>item 6</li>
            <li>item 7</li>
            <li>item 8</li>
         </ul>
      </div>
   </div>

   <div id="two">
      <div>
         <span class="pin">🖈</span>
         <p class="cat">two</p>
         <span class="burger" id="icon-two">☰</span>
      </div>
      <div class="tab-close">
         <ul class="list">
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
         </ul>
         <ul class="list">
            <li>item 5</li>
            <li>item 6</li>
            <li>item 7</li>
            <li>item 8</li>
         </ul>
      </div>
   </div>

   <div id="three">
      <div>
         <span class="pin">🖈</span>
         <p class="cat">three</p>
         <span class="burger" id="icon-three">☰</span>
      </div>
      <div class="tab-close">
         <ul class="list">
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
         </ul>
         <ul class="list">
            <li>item 5</li>
            <li>item 6</li>
            <li>item 7</li>
            <li>item 8</li>
         </ul>
      </div>
   </div>

   <div id="four">
      <div>
         <span class="pin">🖈</span>
         <p class="cat">four</p>
         <span class="burger" id="icon-four">☰</span>
      </div>
      <div class="tab-close">
         <ul class="list">
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
  ...

CSS

body {
   font-family: sans-serif;
   margin: 0;
   padding: 0;
   color: #ffffff;
   text-transform: uppercase;
   height: 100vh;
}

/************** LAYOUT *************/

#content {
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   grid-auto-rows: minmax(0px, auto);
   grid-gap: 0px;
   margin: 0 auto;
   padding: 0;
   height: 100%;
   grid-template-areas: "header" 
                        "one" 
                        "two"
                        "three"
                        "four"
                        "five"
                        "six";
}

@media screen and (min-width: 760px) {
   #content {
      max-width: 75%;
   }
}

/************** STYLING *************/

#content header {
   grid-area: header;
   justify-content: center;
   align-items: center;
   display: flex;
   justify-content: center;
   align-items: center;
   background-image:  linear-gradient(to right, rgba(94, 0, 201, 0.83), 
                      rgba(0, 217, 140, 0.81)), 
                      url(https://images.unsplash.com/photo-1507961455425-0caef37ef6fe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b9979194d5788182dde0ebf3753252ae&auto=format&fit=crop&w=1055&q=80);
   background-position: center center;
   background-size: cover;
/*    margin-bottom: 3px; */
    min-height: 100px;
/*   margin-bottom: 0; */
    font-size: 5vh;
}

#content div {
   width: 100%;
   justify-content: space-between;
   align-items: flex-start;
   box-shadow: 0px -3px 5px rgba(49, 49, 49, 0.33);
   overflow: hidden;
}

span.burger {
   cursor: pointer;
}

span.burger:hover {
   color: gray;
}

#content div div {
   display: flex;
}

#content div div:nth-child(2) {
   justify-content: center;
   overflow: hidden;
}

/* classes to add or remove dynamically with javascript*/

.tab-open {
   height: 200px;
   transition: height 1s;
}

.tab-close {
   height: 0;
   transition: height 1s;
} /* end of dynamic classes */

/* list styles into box*/

#content div ul li {
   display: flex;
  ...

JavaScript

window.addEventListener('DOMContentLoaded', () => {
   const burgers = document.querySelectorAll('.burger');
   const tabs = document.querySelectorAll('#content div div:nth-child(2)');

   for (const icon of burgers) {
      icon.addEventListener('click', function (e) {
         const idIconBurger = `#${e.target.id}`,
               iconBurger   = document.querySelector(idIconBurger),
               tab          = iconBurger.parentElement.nextElementSibling;

         if (tab.classList.contains('tab-open')) {
            tab.className = 'tab-close';
            return;
         }
         else {
            for (const tab of tabs) {
               tab.className = 'tab-close';
            }
            tab.className = 'tab-open';
         }
      });
   }
});