1

Right now I have an accordion and interactive cycle I made using pure CSS. When a user clicks on a certain box on the cycle it opens up that specific accordion tab. Is it possible using vanilla JavaScript (no JQuery) to have it also scroll down to the specific tab when a user clicks a box on the cycle? Anything helps, cheers.

.container1 {
    width: 250px;
    height: 250px;
    position: absolute;
    left: 0px;
    right: 0px;
    margin: auto;
    transform: scale(0.85);
}
.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: 2px;
    border-style: solid;
    border-color: #ededed;
    border-radius: 7px;
    box-shadow: 0px 1px 5px #888888;
    z-index: 3;
}
.ele:hover {
    cursor: pointer;
    transform: scale(1.019);
    border-color: f4f4f4;
    background-color: #214d84;
    box-shadow: 0px 2px 9px #888888;
    zoom: 1.02;
}
.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: #cccfd7;
    width: 250px;
    height: 250px;
    border: 17px solid;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    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);
    z-index: 2;
}
.text1line {
    font-size: 13px;
    margin-top: 14%;
    display: block;
    color: white;
    text-decoration: none;
    text-align: center;
}
.text1line:hover {
    text-decoration: none;
}
.text2line {
    font-size: 13px;
    margin-top: 6%;
    display: block;
    color: white;
    text-decoration: none;
    text-align: center;
}
.text2line:hover {
    text-decoration: none;
}
.textcircle {
    font-size: 15px;
    margin-top: 37.5%;
    display: block;
    color: white;
    text-decoration: none;
    text-align: center;
}
.textcircle:hover {
    text-decoration: none;
}
.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;
}
<div class="container1">
 <div class="ele" id="one"><label style="color:#fff;" class="text2line" for="tab-one">Select A Top Team</label></div>
 <div class="ele" id="two"><label style="color:#fff;" class="text2line" for="tab-two">Get Off To A Great Start</label></div>
 <div class="ele" id="three"><label style="color:#fff;" class="text2line" for="tab-train">Train For Success</label></div>
 <div class="ele" id="four"><label style="color:#fff;" class="text2line" for="tab-manage">Manage Work For Results</label></div>
 <div class="ele" id="five"><label style="color:#fff;" class="text1line" for="tab-grow">Grow Careers</label></div>
 <div class="ele" id="six"><label style="color:#fff;" class="text2line" for="tab-build">Build A Deep Bench</label></div>
 <div class="arrow"></div>
 <div class="circle"><a style="color:#fff;" class="textcircle">Manager</a></div>
</div>
<br style="line-height:400px;"/>
<div class="top">
 <p> 
  <span style="font-family: verdana;"><strong>Click the &quot;</strong><span class="ms-rteThemeForeColor-5-0"><strong>+</strong></span><strong>&quot; to expand and the &quot;</strong><span class="ms-rteThemeForeColor-5-0"><strong>x</strong></span><strong>&quot; to collapse</strong></span>
 </p>
</div>
<div class="wrapper">
 <div class="tab">
  <input name="tabs" class="input" id="tab-one" type="checkbox"/>
  <label class="label" for="tab-one">Select A Top Team</label>
  <div class="tab-content">
   <div class="container">
    <p>Content goes here</p>
   </div>
  </div>
 </div>
 <div class="tab">
  <input name="tabs" class="input" id="tab-two" type="checkbox" />
  <label class="label" for="tab-two">Get Off To A Great Start</label>
  <div class="tab-content">
   <div class="container">
    <p>Content goes here</p>
   </div>
  </div>
 </div>
 <div class="tab">
  <input name="tabs" class="input" id="tab-train" type="checkbox"/>
  <label class="label" for="tab-train">Train For Success</label>
  <div class="tab-content">
   <div class="container">
    <p>Content goes here</p>
   </div>
  </div>
 </div>
 <div class="tab">
  <input name="tabs" class="input" id="tab-manage" type="checkbox"/>
  <label class="label" for="tab-manage">Manage Work For Results</label>
  <div class="tab-content">
   <div class="container">
    <p>Content goes here</p>
   </div>
  </div>
 </div>
 <div class="tab">
  <input name="tabs" class="input" id="tab-grow" type="checkbox"/>
  <label class="label" for="tab-grow">Grow Careers</label>
  <div class="tab-content">
   <div class="container">
    <p>Content goes here</p>
   </div>
  </div>
 </div>
 <div class="tab">
  <input name="tabs" class="input" id="tab-build" type="checkbox"/>
  <label class="label" for="tab-build">Build A Deep bench</label>
  <div class="tab-content">
   <div class="container">
    <p>Content goes here</p>
   </div>
  </div>
 </div>
 <div class="bottombar"></div>
</div>
David Kris
  • 799
  • 2
  • 10
  • 25
  • If I understand, you want to use javascript to create a event listener to get focus in a specific div? – Jose Marques Jul 20 '17 at 14:48
  • Yeah, so when I click on Select A Top team on the cycle it scrolls to the "Select A Top Team" tab, If I select Build A Deep Bench on the cycle it scrolls to the "Build A Deep Bench" accordion tab etc... – David Kris Jul 20 '17 at 14:52
  • How is this question [different from your last](https://stackoverflow.com/questions/45089258/go-to-specific-accordion-tab-when-click-pure-css)? – j08691 Jul 20 '17 at 15:28
  • @j08691 That was for pure css only – David Kris Jul 20 '17 at 15:29

1 Answers1

2

Use document.getElementById("button_id").addEventListener("click", function); for trigger.

Use window.location.hash = '#div_id';to get focus.

Example:

document.getElementById("bt1").addEventListener("click", getfocus1);
document.getElementById("bt2").addEventListener("click", getfocus2);
document.getElementById("bt3").addEventListener("click", getfocus3);
document.getElementById("bt4").addEventListener("click", getfocus4);
document.getElementById("bt5").addEventListener("click", getfocus5);
function getfocus1(){
  window.location.hash = '#tab1';
}
function getfocus2(){
  window.location.hash = '#tab2';
}
function getfocus3(){
  window.location.hash = '#tab3';
}
function getfocus4(){
  window.location.hash = '#tab4';
}
function getfocus5(){
  window.location.hash = '#tab5';
}
div{
width:100%;
height:300px;
text-align: center;
}
<button type="button" id = "bt1">Click Me for get focus in div 1!</button> 
<button type="button"  id = "bt2">Click Me for get focus in div 2!</button> 
<button type="button"  id = "bt3">Click Me for get focus in div 3!</button> 
<button type="button"  id = "bt4">Click Me for get focus in div 4!</button> 
<button type="button"  id = "bt5">Click Me for get focus in div 5!</button> 
<div id ="tab1">
  Data 1
</div>
<div id ="tab2">
 Data 2
</div>
<div id ="tab3">
 Data 3
</div>
<div id ="tab4">
 data 4
</div>
<div id ="tab5">
 data 5
</div>

I hope this is what you want.

Jose Marques
  • 748
  • 1
  • 6
  • 22