title: open specific accordion tab with Vanilla JavaScript
body: <p>I have code below for a content cycle and an accordion right below it (both created with Pure CSS). Is this possible with Vanilla JavaScript (no jquery) to make it so if a user clicks on select a top team from the cycle it will target the select a top team accordion tab and open it, and same with the other tabs? Anything helps, cheers.</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-css lang-css prettyprint-override"><code>.container1 {
    width: 250px;
    height: 250px;
    position: absolute;
    top: 45px;
    left: 0px;
    right: 0px;
    margin: auto;
  }
  
  .ele, .arrow, .circle {
     position: absolute;
     left: 0px;
     right: 0px;
     top: 0px;
     bottom: 0px;
     margin: auto;
  }
  
  #one {
      transform: rotate(0deg) translateY(-130px) rotate(0deg);
  }
  #two {
      transform: rotate(60deg) translateY(-130px) rotate(-60deg);
  }
  #three {
      transform: rotate(120deg) translateY(-130px) rotate(-120deg);
  }
  #four {
      transform: rotate(180deg) translateY(-130px) rotate(-180deg);
  }
  #five {
      transform: rotate(240deg) translateY(-130px) rotate(-240deg);
  }
  #six {
      transform: rotate(300deg) translateY(-130px) rotate(-300deg);
  }
  
  
  .ele {
    display: inline-block;
    background-color: #1f497d;
    width: 105px;
    height: 50px;
    border-width: 3px;
    border-style: solid;
    border-color: #ededed;
    border-radius: 7px;
    box-shadow: 0px 1px 5px #888888;
  }
  
  .ele:hover {
    cursor:pointer;
    transform:scale(1.019);
    border-color:f4f4f4;
    background-color:#214d84;
    box-shadow: 0px 2px 9px #888888;
    zoom:1.009;
  }
  
  .circle {
    background-color: #006850;
    width: 85px;
    height: 85px;
    border-width: 3px;
    border-style: solid;
    border-color: #fefefe;
    border-radius: 50%;
    box-shadow: 0px 1px 5px #888888;
  }
  
  .arrow {
    color: #d0d3d8;
    width: 250px;
    height: 250px;
    border: 17px solid;
    border-radius: 50%;
    position: absolute;
    z-index: -3;
    left: -17px;
  }
  
  #two:hover ~ .arrow {
    border-top-color: #006850;
    transform: rotate(24deg);
  }
  #three:hover ~ .arrow {
    border-top-color: #006850;
    transform: rotate(66deg);
  }
  #four:hover ~ .arrow {
    border-top-color: #006850;
    border-right-color: #006850;
    transform: rotate(25deg);
  }
  #five:hover ~ .arrow {
    border-top-color: #006850;
    border-right-color: #006850;
    border-bottom-color: #006850;
    transform: rotate(26deg);
  }
  #six:hover ~ .arrow {
    border-top-color: #006850;
    border-right-color: #006850;
    border-bottom-color: #006850;
    transform: rotate(66deg);
  }
  #one:hover ~ .arrow {
    border-color: #006850;
  }
  #one:hover ~ .circle:after {
    border-top-color: #006850;
  }
  
  .circle:before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    bottom: 0;
    top: -96px;
    left: -36px;
    background: #fff;
    background-color: white;
    transform: rotate(-120deg);
    z-index: -1;
  }
  
  .circle:after {
    content: "";
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #d0d3d8;
    position: absolute;
    top: -83px;
    left: -44px;
    transform: rotate(-120deg);
  }
  
  .text1line {
    font-size:15px;
    margin-top:14%;
    display:block;
    color:white;
    text-decoration:none;
    text-align:center;
  }
  
  .text2line {
    font-size:15px;
    margin-top:6%;
    display:block;
    color:white;
    text-decoration:none;
    text-align:center;
  }
  
  .textcircle {
    font-size:17px;
    margin-top:37.5%;
    display:block;
    color:white;
    text-decoration:none;
    text-align:center;
  }
  
  .wrapper {
    max-width: 960px;
    margin: 0 auto;
  }
  
  
  /* Acordeon styles */
  
  .tab {
    position: relative;
    margin-bottom: 1px;
    width: 100%;
    overflow: hidden;
  }
  
  .bold {
    font-weight:bold;
    color: #005bab;
    }
  
  .top {
    margin-top:-20px;
    text-align: center;
    font-size:13px;
  }
  
  .input {
    position: absolute;
    opacity: 0;
    z-index: -1;
  }
  
  .label {
    position: relative;
    text-align: center;
    display: block;
    padding: 0 0 0 1em;
    color: #005bab;
    background: #e2ecf6;
    font-size: 14px;
    font-family: Verdana;
    font-weight: bold;
    line-height: 6;
    cursor: pointer;
  }
  
  .label:hover {
    background-color: #d2e2ef;
  }
  
  .tab-content {
    max-height: 0;
    overflow: hidden;
    padding: 0px;
    -webkit-transition: max-height .5s;
    -o-transition: max-height .5s;
    transition: max-height .5s;
    padding-left: 35px;
    background: #dce7f2;
  }
  
  .tab-content .container {
    padding: 1em;
    margin: 0;
    opacity: 0;
    transform: scale(0.75);
    -webkit-transition: transform 0.75s, opacity .75s;
    -o-transition: transform 0.75s, opacity .75s;
    transition: transform 0.75s, opacity .75s;
    background: #f4f8fc;
  }
  
  
  /* :checked */
  
  .input:checked~.tab-content {
    max-height: 35em;
  }
  
  .input:checked~.tab-content .container {
    transform: scale(1);
    opacity: 1;
  }
  
  /* Icon */
  
  .label::after {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 3em;
    height: 3em;
    line-height: 3;
    text-align: center;
    -webkit-transition: all .35s;
    -o-transition: all .35s;
    transition: all .35s;
  }
  
  .input[type=checkbox]+.label::after {
    content: "+";
  }
  
  .input[type=radio]+.label::after {
    content: "";
  }
  
  .input[type=checkbox]:checked+.label::after {
    transform: rotate(315deg);
  }
  
  .input[type=radio]:checked+.label::after {
    transform: rotateX(180deg);
  }
  
  .bottombar {
    content: "";
    display: block;
    height: 1em;
    width: 100%;
    background-color: #00688B;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container1"&gt;
    &lt;div class="ele" id="one"&gt;&lt;a class="text2line" href=""&gt;Select A Top Team&lt;/a&gt;&lt;/div&gt;
      &lt;div class="ele" id="two"&gt;&lt;a class="text2line" href=""&gt;Get Off To A Great Start&lt;/a&gt;&lt;/div&gt;
      &lt;div class="ele" id="three"&gt;&lt;a class="text2line" href=""&gt;Train For Success&lt;/a&gt;&lt;/div&gt;
      &lt;div class="ele" id="four"&gt;&lt;a class="text2line" href=""&gt;Manage Work For Results&lt;/a&gt;&lt;/div&gt;
      &lt;div class="ele" id="five"&gt;&lt;a class="text1line" href=""&gt;Grow Careers&lt;/a&gt;&lt;/div&gt;
      &lt;div class="ele" id="six"&gt;&lt;a class="text2line" href=""&gt;Build A Deep Bench&lt;/a&gt;&lt;/div&gt;
      &lt;div class="arrow"&gt;&lt;/div&gt;
    &lt;div class="circle"&gt;&lt;a class="textcircle"&gt;Manager&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;br style="line-height:400px;"/&gt;
  &lt;div class="top"&gt; 
     &lt;p&gt; 
        &lt;span style="font-family: verdana;"&gt;&lt;strong&gt;Click the &amp;quot;&lt;/strong&gt;&lt;span class="ms-rteThemeForeColor-5-0"&gt;&lt;strong&gt;+&lt;/strong&gt;&lt;/span&gt;&lt;strong&gt;&amp;quot; to expand and the &amp;quot;&lt;/strong&gt;&lt;span class="ms-rteThemeForeColor-5-0"&gt;&lt;strong&gt;x&lt;/strong&gt;&lt;/span&gt;&lt;strong&gt;&amp;quot; to collapse&lt;/strong&gt;&lt;/span&gt;&lt;/p&gt; 
  &lt;/div&gt; 
  &lt;div class="wrapper"&gt;
    
    
    
    &lt;div class="tab"&gt;
      &lt;input name="tabs" class="input" id="tab-one" type="checkbox"/&gt;
           &lt;label class="label" for="tab-one"&gt;Select A Top Team&lt;/label&gt;
           &lt;div class="tab-content"&gt;
              &lt;div class="container"&gt;
                
                &lt;p&gt;Content goes here&lt;/p&gt;
                
              &lt;/div&gt;
           &lt;/div&gt;
    &lt;/div&gt;
    
    
    
    &lt;div class="tab"&gt;
      &lt;input name="tabs" class="input" id="tab-two" type="checkbox" /&gt;
      &lt;label class="label" for="tab-two"&gt;Get Off To A Great Start&lt;/label&gt;
      &lt;div class="tab-content"&gt;
        &lt;div class="container"&gt;
          
          &lt;p&gt;Content goes here&lt;/p&gt;
          
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;div class="tab"&gt;
      &lt;input name="tabs" class="input" id="tab-train" type="checkbox"/&gt;
           &lt;label class="label" for="tab-train"&gt;Train For Success&lt;/label&gt;
           &lt;div class="tab-content"&gt;
              &lt;div class="container"&gt;
                
                &lt;p&gt;Content goes here&lt;/p&gt;
                
              &lt;/div&gt;
           &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;div class="tab"&gt;
      &lt;input name="tabs" class="input" id="tab-manage" type="checkbox"/&gt;
           &lt;label class="label" for="tab-manage"&gt;Manage Work For Results&lt;/label&gt;
           &lt;div class="tab-content"&gt;
              &lt;div class="container"&gt;
                
                &lt;p&gt;Content goes here&lt;/p&gt;
                
              &lt;/div&gt;
           &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;div class="tab"&gt;
      &lt;input name="tabs" class="input" id="tab-grow" type="checkbox"/&gt;
           &lt;label class="label" for="tab-grow"&gt;Grow Careers&lt;/label&gt;
           &lt;div class="tab-content"&gt;
              &lt;div class="container"&gt;
                
                &lt;p&gt;Content goes here&lt;/p&gt;
                
              &lt;/div&gt;
           &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;div class="tab"&gt;
      &lt;input name="tabs" class="input" id="tab-build" type="checkbox"/&gt;
           &lt;label class="label" for="tab-build"&gt;Build A Deep bench&lt;/label&gt;
           &lt;div class="tab-content"&gt;
              &lt;div class="container"&gt;
                
                &lt;p&gt;Content goes here&lt;/p&gt;
                
              &lt;/div&gt;
           &lt;/div&gt;
    &lt;/div&gt;
  
    
    &lt;div class="bottombar"&gt;&lt;/div&gt;
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>