title: How to add next previous button to change the tab content in javascript?
body: <p>I am trying to create tabs using html css java script . On clicking the tab it goes to respective tab content.Here in this code
    on clicking
       GO TO TAB2 to goes to tab 2.
       GO TO TAB to goes to previous tab.</p>
  
  <p>I want to add previous and Next button to switch between tabs.(ref image)<a href="https://i.stack.imgur.com/nGAi1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nGAi1.png" alt="enter image description here"></a></p>
  
  <p>How to achieve this?</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>window.onload=function() {
  
    // get tab container
     var container = document.getElementById("tabContainer");
   var tabcon = document.getElementById("tabscontent");
    //alert(tabcon.childNodes.item(1));
      // set current tab
      var navitem = document.getElementById("tabHeader_1");
    
      //store which tab we are on
      var ident = navitem.id.split("_")[1];
    //alert(ident);
      navitem.parentNode.setAttribute("data-current",ident);
      //set current tab with class of activetabheader
      navitem.setAttribute("class","tabActiveHeader");
  
      //hide two tab contents we don't need
       var pages = tabcon.getElementsByTagName("div.tabpage");
       for (var i = 1; i &lt; pages.length; i++) {
         pages.item(i).style.display="none";
    }
  
      //this adds click event to tabs
      var tabs = container.getElementsByTagName("li");
   
      for (var i = 0; i &lt; tabs.length; i++) {
        tabs[i].onclick=displayPage;
      }
   
   
   
   
   // get tab container 2
     var container2 = document.getElementById("tabContainer2");
   var tabcon2 = document.getElementById("tabscontent2");
   
      var navitem2 = document.getElementById("tabHeader2_1");
    
      //store which tab we are on
      var ident2 = navitem2.id.split("_")[1];
    //alert(ident2);
      navitem2.parentNode.setAttribute("data-current",ident2);
      //set current tab with class of activetabheader
      navitem2.setAttribute("class","tabActiveHeader");
  
      //hide two tab contents we don't need
       var pages2 = tabcon2.getElementsByTagName("div.tabpage2");
       for (var i = 1; i &lt; pages2.length; i++) {
         pages2.item(i).style.display="none";
    }
  
      //this adds click event to tabs
      var tabs2 = container2.getElementsByTagName("li");
      for (var i = 0; i &lt; tabs2.length; i++) {
        tabs2[i].onclick=displayPage2;
      }
   
   
  
   
   // get tab container 3
     var container3 = document.getElementById("tabContainer3");
   var tabcon3 = document.getElementById("tabscontent3");
    //alert("TAB3: "+tabcon3.childNodes.item(1));
      // set current tab
      var navitem3 = document.getElementById("tabHeader3_1");
    
      //store which tab we are on
      var ident3 = navitem3.id.split("_")[1];
    //alert(ident);
      navitem3.parentNode.setAttribute("data-current",ident3);
      //set current tab with class of activetabheader
      navitem3.setAttribute("class","tabActiveHeader");
  
      //hide two tab contents we don't need
       var pages3 = tabcon3.getElementsByTagName("div.tabpage3");
       for (var i = 1; i &lt; pages3.length; i++) {
         pages3.item(i).style.display="none";
    }
  
      //this adds click event to tabs
      var tabs3 = container3.getElementsByTagName("li");
      for (var i = 0; i &lt; tabs3.length; i++) {
        tabs3[i].onclick=displayPage3;
      }
    
   
   };
   
    
   
    
  // on click of first tabs
  function displayPage(event) {
   
   for (var i = 0; i &lt; event.target.parentElement.childElementCount; i++) {
        if(event.target.parentElement.children[i].id == event.target.id)
     {
    document.getElementById(event.target.id).setAttribute("class","tabActiveHeader");
    document.getElementById(document.getElementsByClassName('tabpage')[i].id).style.display="block";
     }
     else
     {
    document.getElementById(event.target.parentElement.children[i].id).removeAttribute("class");
    document.getElementById(document.getElementsByClassName('tabpage')[i].id).style.display="none";
     }
      }
   
  }
  
  
  //Tab 2
  function displayPage2(event) {
   for (var i = 0; i &lt; event.target.parentElement.childElementCount; i++) {
        if(event.target.parentElement.children[i].id == event.target.id)
     {
    document.getElementById(event.target.id).setAttribute("class","tabActiveHeader");
    document.getElementById(document.getElementsByClassName('tabpage2')[i].id).style.display="block";
     }
     else
     {
    document.getElementById(event.target.parentElement.children[i].id).removeAttribute("class");
    document.getElementById(document.getElementsByClassName('tabpage2')[i].id).style.display="none";
     }
      }
  }
  
  
  
  //Tab 3
  function displayPage3(event) {
   for (var i = 0; i &lt; event.target.parentElement.childElementCount; i++) {
        if(event.target.parentElement.children[i].id == event.target.id)
     {
    document.getElementById(event.target.id).setAttribute("class","tabActiveHeader");
    document.getElementById(document.getElementsByClassName('tabpage3')[i].id).style.display="block";
     }
     else
     {
    document.getElementById(event.target.parentElement.children[i].id).removeAttribute("class");
    document.getElementById(document.getElementsByClassName('tabpage3')[i].id).style.display="none";
     }
      }
  } 
   
    
  
    function goToTab2() {
  
    document.getElementById("tabHeader_1").removeAttribute("class","tabActiveHeader");
    document.getElementById("tabHeader_3").removeAttribute("class","tabActiveHeader");
    document.getElementById("tabHeader_2").setAttribute("class","tabActiveHeader");
    
    document.getElementById("tabpage_1").setAttribute("style", "display: none");
    document.getElementById("tabpage_3").setAttribute("style", "display: none");
    document.getElementById("tabpage_2").setAttribute("style", "display: block");
   }
   
    function goToTab1() {
   
    document.getElementById("tabHeader_2").removeAttribute("class","tabActiveHeader");
    document.getElementById("tabHeader_3").removeAttribute("class","tabActiveHeader");
    document.getElementById("tabHeader_1").setAttribute("class","tabActiveHeader");
    
    document.getElementById("tabpage_2").setAttribute("style", "display: none");
    document.getElementById("tabpage_3").setAttribute("style", "display: none");
    document.getElementById("tabpage_1").setAttribute("style", "display: block");
   }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> body {
   font-family: arial;
  }
  .tabContainer  {
   
   padding:15px;
   -moz-border-radius: 4px;
   border-radius: 4px; 
  }
  .tabs{
   overflow:hidden;
  }
  .tabs &gt; ul{
   font: 1em;
   list-style:none;
  }
  .tabs &gt; ul &gt; li {
   margin:0 2px 0 0;
   padding:7px 10px;
   display:block;
   float:left;
   color:#333;
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
   -moz-border-radius-topleft: 4px;
   -moz-border-radius-topright: 4px;
   -moz-border-radius-bottomright: 0px;
   -moz-border-radius-bottomleft: 0px;
   border-top-left-radius:4px;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 0px;
   border-bottom-left-radius: 0px; 
   
   background: #FFFFFF; /* old browsers */
   background: -moz-linear-gradient(top, #FFFFFF 0%, #F3F3F3 10%, #F3F3F3 50%, #FFFFFF 100%); /* firefox */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(10%,#F3F3F3), color-stop(50%,#F3F3F3), color-stop(100%,#FFFFFF)); /* webkit */
   cursor:pointer;
   border: 1px #ccc solid;
  }
  .tabs &gt; ul &gt; li:hover {
   color:#ccc;
   background: #C9C9C9; /* old browsers */
   background: -moz-linear-gradient(top, #0C91EC 0%, #257AB6 100%); /* firefox */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0C91EC), color-stop(100%,#257AB6)); /* webkit */
  }
  .tabs &gt; ul &gt; li.tabActiveHeader {
   color:#FFF;
   color: #333background: #C9C9C9; /* old browsers */
   background: -moz-linear-gradient(top, #0C91EC 0%, #257AB6 100%); /* firefox */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0C91EC), color-stop(100%,#257AB6)); /* webkit */
  }
  .tabscontent {
   -moz-border-radius-topleft: 0px;
   -moz-border-radius-topright: 4px;
   -moz-border-radius-bottomright: 4px;
   -moz-border-radius-bottomleft: 4px;
   border-top-left-radius: 0px;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
   border-bottom-left-radius: 4px; 
   padding:10px 10px 25px;
   background: #FFFFFF; /* old browsers */
   background: -moz-linear-gradient(top, #FFFFFF 0%, #FFFFFF 90%, #e4e9ed 100%); /* firefox */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(90%,#FFFFFF), color-stop(100%,#e4e9ed)); /* webkit */
   margin:0;
   color:#333;
   border: 1px #ccc solid;
  }
  .gototab {
   cursor: pointer;
   background: green;
   color: #fff;
   padding: 10px;
   height: 30px;
   line-height: 30px;
   width: 100px;
   text-align: center;
   float: left;
   margin: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="tabContainer" class="tabContainer"&gt;
      &lt;div class="tabs" id="tabs"&gt;
        &lt;ul&gt;
          &lt;li id="tabHeader_1"&gt;Page 1&lt;/li&gt;
          &lt;li id="tabHeader_2"&gt;Page 2&lt;/li&gt;
          &lt;li id="tabHeader_3"&gt;Page 3&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="tabscontent" class="tabscontent"&gt;
        &lt;div class="tabpage" id="tabpage_1"&gt;
          &lt;h2&gt;Page 1&lt;/h2&gt;
          &lt;p&gt;Lorem Ipsum is simply dummy text &lt;/p&gt;
    
        &lt;/div&gt;
        &lt;div class="tabpage" id="tabpage_2" style="display:none;"&gt;
          &lt;h2&gt;Page 2&lt;/h2&gt;
          &lt;p&gt;
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
    &lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="tabpage" id="tabpage_3" style="display:none;"&gt;
          &lt;h2&gt;Page 3&lt;/h2&gt;
          &lt;p&gt;
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
    &lt;/p&gt;
    &lt;p&gt;
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
    &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
   
   &lt;div class="gototab" onclick="goToTab2(this)"&gt;Go to Tab 2 &gt;&gt; &lt;/div&gt; 
   &lt;div class="gototab" onclick="goToTab1(this)"&gt; &lt;&lt; Go to Tab 1&lt;/div&gt;
   
   &lt;div style="clear:both;"&gt;&amp;nbsp;&lt;div&gt;
   
   &lt;p style="margin-top: 150px;"&gt;&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to add next previous button using java script to switch between tabs.</p>