I want to ask something about adding scrollable and draggable events in Tabs for changing the tab and also the content.

I’ve found some interesting and great code in codepen, but it’s using Babel js which I don’t know how to use it.

I think it seems cool to do and also to apply in website and make it very accessible, which we only have to scroll or drag (in mobile) then change the tab and also we can click too to change the tab. My inspiration is from Fullpage JS which we only have to scroll or drag to change the page.

So, is it possible to do with pure JS? and How? Btw, I’ve made my own tab code, and here’s the snippet:

//Toggle the toggle and menu wrapper
window.addEventListener('DOMContentLoaded', () => {
    const menuTrigger = document.querySelector('.toggle'),
          menu = document.querySelector('.tabs');

    menuTrigger.onclick = openMenu
  
    function openMenu() {
          menuTrigger.classList.toggle('active');
          menu.classList.toggle('active');
    } 
})

//Add active class of tab on page load
var ready = (callback) => {
    if (document.readyState != "loading") callback();
    else document.addEventListener("DOMContentLoaded", callback);
}
ready(() => {
    if(window.angular) return;
    document.querySelectorAll('.tab:first-child').forEach( first => {
    first.classList.add('tab-active');
})
    document.querySelectorAll('.content-item:first-child').forEach( first => {
    first.classList.add('content-active');
    })
})

//Add & remove class tab, contents, & menu on click
window.addEventListener('DOMContentLoaded', ()=> {
    let tabs = document.querySelectorAll('.tab');
    let content = document.querySelectorAll('.content-item');
    let menuW = document.querySelector('.tabs');
    let toggle = document.querySelector('.toggle');
  
        for (let i = 0; i < tabs.length; i++) {            
            tabs[i].addEventListener('click', () => tabClick(i));
        }

        function tabClick(currentTab) {
            removeActiveTab();
            
            //Remove Active Class
            const iframe = content[currentTab].querySelector('iframe');
            let prevt = document.querySelectorAll('.tab-active')[0];
            let prevc = document.querySelectorAll('.content-active')[0];
            prevc.classList.remove('content-active');
            prevc.classList.add('content-show');
            prevc.querySelector('iframe').removeAttribute('src');
            setTimeout(function() {
              prevc.classList.remove('content-show');
            },1500);
            prevt.classList.remove('tab-active');
            
            //Add Active Class
            tabs[currentTab].classList.add('tab-active');
            content[currentTab].classList.add('content-active');
            iframe.setAttribute('src', iframe.getAttribute('data-src'));
            
        }
            
        function removeActiveTab() {
            menuW.classList.remove('active');
            menuW.classList.add('show-tab');
            setTimeout(function() {
              menuW.classList.remove('show-tab');},500);
            toggle.classList.remove('active');
        }
})
.container-tab {
            width: 100vw;
            height: 65px;
            display: flex;
            justify-content: top;
            padding: 0;
            margin: 0;
            flex-direction: row;
        }
    
        .wrapperleft {
            width: 10%;
            height: 100%;
            justify-content: center;
            align-items: center;
            display: flex;
            flex-direction: row;
        }
    
        .wrapperright {
            width: 90%;
            height: 100%;
            justify-content: center;
         }

        .toggle {
            width: 50px;
            height: 50px;
            background-color: red;
            cursor: pointer;
            transition: 1.5s ease-in-out all;
        }

        .toggle.active {
            background-color: blue;
            transition: 1.5s ease-in-out all;
        }

        .tabs {
            display: none;
            overflow: hidden;
            justify-content: flex-start;
            width: 340px;
            margin-left: 5px;
            position: absolute;
            left: 10%;
        }

        .show-tab {
            display: flex;
            animation-name: menu-out;
            animation-duration: 0.5s;
        }
        
        @keyframes menu-out {
            0% {display: flex; opacity: 1;}
           99% {display: flex; opacity: 0;}
          100% {display: none; opacity: 0;}
        }

        .tabs.active{
            display: flex;
            animation-name: menu-in;
            animation-duration: 0.5s;
        }

        @keyframes menu-in {
            0% {display: none; opacity: 0;}
            1% {display: flex; opacity: 0.01;}
          100% {display: flex; opacity: 1;}
        }

        .tab {
            font-size: 16px;
            padding: 5px 10px;
            cursor: pointer;
        }

        .tab-active {
            background-color: rgb(250, 97, 9);
        }

        .content {
            width: 100vw;
            margin-top: 5px;
            height: 100vh;
        }

        .content-item {
            display: none;
            padding: 0px;
            border: none;
            position: absolute;
        }
        
        .content-show {
            display: flex;
            animation-name: fade-out;
            animation-duration: 2.5s;
        }
        
        @keyframes fade-out {
            0% {
                opacity: 1;
                display: flex;
            }
            99% {
                opacity: 0;
                display: flex;
            }
            100% {
                opacity: 0;
                display: none;
            }
        }

        .content-active {
            display: flex;
            border: none;
            justify-content: center;
            height: 100%;
            animation-name: fade-in;
            animation-duration: 2.5s;
        }

        @keyframes fade-in {
            0% {
                display: none;
                opacity: 0;
            }
            1% {
                display: block;
                opacity: 0.01;
            }
            100%{
                display: block;
                opacity: 1;
            }
        }

        .content-iframe {
            border: none;
            padding: 0px;
            margin: 0px;
            width: 100vw;
            height: 50vh;
        }
<div class="container-tab">
      <div class="wrapperleft">
        <div class="toggle"></div>
        <div class="tabs">
            <div class="tab">Tokyo</div>
            <div class="tab">Paris</div>
            <div class="tab">Washington</div>
            <div class="tab">Jakarta</div>
            <div class="tab">London</div>
        </div>
      </div>

      <div class="wrapperright">
      </div>
</div>
  <div class="container-content">
        <div class="content">
            <div class="content-item">
              <div class="content-wrapper1">
                <div class="content-wrapper2">
                  <div class="content-wrapper3">
                    <iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Tokyo" src="https://en.wikipedia.org/wiki/Tokyo" loading="lazy"></iframe>
                    </div>
                  </div>
               </div>
            </div>
            <div class="content-item">
              <div class="content-wrapper1">
                <div class="content-wrapper2">
                  <div class="content-wrapper3">
                    <iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Paris" loading="lazy"></iframe>
                    </div>
                  </div>
               </div>
            </div>
            <div class="content-item">
              <div class="content-wrapper1">
                <div class="content-wrapper2">
                  <div class="content-wrapper3">
                    <iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Washington" loading="lazy"></iframe>
                    </div>
                  </div>
               </div>
            </div>
            <div class="content-item">
              <div class="content-wrapper1">
                <div class="content-wrapper2">
                  <div class="content-wrapper3">
                    <iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Jakarta" loading="lazy"></iframe>
                    </div>
                  </div>
               </div>
            </div>
            <div class="content-item">
              <div class="content-wrapper1">
                <div class="content-wrapper2">
                  <div class="content-wrapper3">
                    <iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/London" loading="lazy"></iframe>
                    </div>
                  </div>
               </div>
            </div>
        </div>
    </div>
</div>

1