Music Corner

by enbette

HTML

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<div class="main">
    <div style="height:70px">
        <img src="https://i.imgur.com/qbNNP2l.png">
        
        </div>
<div class="row">
    <div class="s12 railwayBold">
      <ul class="tabs scrollable">
        <li class="tab col s3 selectedTab" id="tab0"><a href="#kofod">Kofod</a></li>
        <li class="tab col s3" id="tab1"><a href="#sadbread">SadBread</a></li>
        <li class="tab col s3" id="tab2"><a href="#enbette">Enbette</a></li>
        <li class="tab col s3" id="tab3"><a href="#chat0yant">Chat0yant</a></li>
        <li class="tab col s3" id="tab4"><a href="#olympus">Olympus</a></li>
      </ul>
    </div>
  </div>
    <div id="panel0" class="panel" style='white-space: nowrap;'>
        <img src="https://i.imgur.com/c26UU8m.png">
        <iframe style='position:relative;border:solid; border-color:white; border-width:5px;
        left:-475px;top:-86px' width="420" height="228" frameborder="0" allowfullscreen
      src="https://www.youtube.com/embed/q36gU5iMpiw?si=rnQaUNYW0CbyWJP1" ></iframe>
    </div> 
    <div id="panel1" class="panel" style='height:0px;white-space: nowrap;'>
        <img src="https://i.imgur.com/1BZ0dt5.png">
        <iframe style='position:relative;border:solid; border-color:white; border-width:5px;
        left:-654px;top:-100px' width="420" height="228" frameborder="0" allowfullscreen
      src="https://www.youtube.com/embed/ax2nJkyhACs?si=C068hLfJWPkZ5jW4" ></iframe>
    </div>
    <div id="panel2" class="panel" style='height:0px;white-space: nowrap;'>
        <img src="https://i.imgur.com/IDbw8Qs.png">
        <iframe style='position:relative;border:solid; border-color:white; border-width:5px;
        left:-475px;top:-46px' width="420" height="228" frameborder="0" allowfullscreen
      src="https://www.youtube.com/embed/PAL1GSYDP58?si=kKKHbF_2wv-D81tQ" ></iframe>
    </div>
    <div id="panel3" class="panel" style='height:0px;white-space: nowrap;'>
        <img...

CSS

.main {
    background-color: #f1f1f1;
    width:688px;
    height:500px;
    overflow-y: hidden;
}

.tabs .tab {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    display: block;
    float: left;
    text-align: center;
    line-height: 48px;
    
    padding: 0;
    margin: 0;
    margin-bottom: 0px;
    padding-bottom: 8px;
    text-transform: uppercase;
    text-overflow: ellipsis;
    overflow: hidden;
    letter-spacing: .8px;
    
    
}
.tabs {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    overflow: hidden;
    padding-left: 0px;
    background-color: #fff;
    margin: 0 auto;
    width: 100%;
    white-space: nowrap;
    
}
.tabs .tab a {
    color: #ee6e73;
    display: block;
    width: 100%;
    height: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    transition: color .28s ease;
}
a {
    text-decoration: none;
}
.tabs .tab a:hover {
    color: #f9c9cb;
    
}

.section {
  margin-top: 50px;
  background: lightblue;
}

.deselectedTab {
    animation: 0.5s 1 forwards  slide-out;
}

.selectedTab {
    animation: 0.5s 1 forwards  slide-in;
}

@keyframes slide-in {
  0% {
    
  }

  100% {
    margin-bottom: 8px;
    padding-bottom: 0px;
    box-shadow: 0px 8px 0px 0px #f9c9cb;
  }
}
@keyframes slide-out {
  0% {
    margin-bottom: 8px;
    padding-bottom: 0px;
    box-shadow: 0px 8px 0px 0px #f9c9cb;
  }

  100% {
    margin-bottom: 0px;
    padding-bottom: 8px;
    box-shadow: 0px 0px 0px 0px #f9c9cb;
  }
}

.deselectedPanel {
    animation: 0.5s 1 forwards ease-in fade-out;
}

.selectedPanel {
    animation: 0.5s 1 forwards ease-out fade-in;
    display:block;
}
.panel {
    position: absolute;
    overflow: hidden;
}
@keyframes fade-in {
  0% {
    height:0px;
  }

  100% {
    height:400px;
    
  }
}
@keyframes fade-out {
  0% {
    height:400px;
  }

  100% {
    height:0px;
  }
}

JavaScript

let curTab = 'tab0'
    let tabs = document.getElementsByClassName('tab')
    let panels = document.getElementsByClassName('panel')
    let totalTabs = tabs.length

    let startPointX = 0
    let endPointX = 688/totalTabs

    Array.from(tabs).forEach((tab)=>tab.addEventListener('click',setActive))


    function setActive(e){
        if (e.srcElement.parentNode.classList.contains('col')){
            Array.from(tabs).forEach((tab)=>{if (tab.className === 'tab col s3 selectedTab')
            {tab.className = 'tab col s3 deselectedTab'}
        })
            e.srcElement.parentNode.className = 'tab col s3 selectedTab'
            Array.from(panels).forEach((panel)=>{if (panel.className === 'panel selectedPanel'){
                panel.className = 'panel deselectedPanel'
            }})
            document.getElementById('panel'+e.srcElement.parentNode.id.replace('tab','')).
            className = 'panel selectedPanel'
        }
    }