title: Is It Possible to Add Scrollable and Draggable (for Mobile) Events to Change Tab and the Content?
body: <p>I want to ask something about adding scrollable and draggable events in Tabs for changing the tab and also the content.</p>
  <p>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.</p>
  <p>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.</p>
  <p>So, is it possible to do with pure JS? and How? Btw, I've made my own tab code, and here's the snippet:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Toggle the toggle and menu wrapper
  window.addEventListener('DOMContentLoaded', () =&gt; {
      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) =&gt; {
      if (document.readyState != "loading") callback();
      else document.addEventListener("DOMContentLoaded", callback);
  }
  ready(() =&gt; {
      if(window.angular) return;
      document.querySelectorAll('.tab:first-child').forEach( first =&gt; {
      first.classList.add('tab-active');
  })
      document.querySelectorAll('.content-item:first-child').forEach( first =&gt; {
      first.classList.add('content-active');
      })
  })
  
  //Add &amp; remove class tab, contents, &amp; menu on click
  window.addEventListener('DOMContentLoaded', ()=&gt; {
      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 &lt; tabs.length; i++) {            
              tabs[i].addEventListener('click', () =&gt; 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');
          }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container-tab"&gt;
        &lt;div class="wrapperleft"&gt;
          &lt;div class="toggle"&gt;&lt;/div&gt;
          &lt;div class="tabs"&gt;
              &lt;div class="tab"&gt;Tokyo&lt;/div&gt;
              &lt;div class="tab"&gt;Paris&lt;/div&gt;
              &lt;div class="tab"&gt;Washington&lt;/div&gt;
              &lt;div class="tab"&gt;Jakarta&lt;/div&gt;
              &lt;div class="tab"&gt;London&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="wrapperright"&gt;
        &lt;/div&gt;
  &lt;/div&gt;
    &lt;div class="container-content"&gt;
          &lt;div class="content"&gt;
              &lt;div class="content-item"&gt;
                &lt;div class="content-wrapper1"&gt;
                  &lt;div class="content-wrapper2"&gt;
                    &lt;div class="content-wrapper3"&gt;
                      &lt;iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Tokyo" src="https://en.wikipedia.org/wiki/Tokyo" loading="lazy"&gt;&lt;/iframe&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="content-item"&gt;
                &lt;div class="content-wrapper1"&gt;
                  &lt;div class="content-wrapper2"&gt;
                    &lt;div class="content-wrapper3"&gt;
                      &lt;iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Paris" loading="lazy"&gt;&lt;/iframe&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="content-item"&gt;
                &lt;div class="content-wrapper1"&gt;
                  &lt;div class="content-wrapper2"&gt;
                    &lt;div class="content-wrapper3"&gt;
                      &lt;iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Washington" loading="lazy"&gt;&lt;/iframe&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="content-item"&gt;
                &lt;div class="content-wrapper1"&gt;
                  &lt;div class="content-wrapper2"&gt;
                    &lt;div class="content-wrapper3"&gt;
                      &lt;iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/Jakarta" loading="lazy"&gt;&lt;/iframe&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="content-item"&gt;
                &lt;div class="content-wrapper1"&gt;
                  &lt;div class="content-wrapper2"&gt;
                    &lt;div class="content-wrapper3"&gt;
                      &lt;iframe class= "content-iframe" data-src="https://en.wikipedia.org/wiki/London" loading="lazy"&gt;&lt;/iframe&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>