go to specific accordion tab when click pure css

Question

I have code below for a cycle and an accordion I made using pure css. When you click a heading on the cycle, it opens the designated accordion tab. How do I make it so it opens the designed accordion tab as well as scroll down to it but with pure css? I tried adding an <a href=""> tag in the label, but that didn't work. Any thoughts? 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;
}
.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>

https://stackoverflow.com/questions/6677035/jquery-scroll-to-element — Alexander Staroselsky, Jul 13 '17 at 19:16
Here is a fiddle of the current code https://jsfiddle.net/8vwfr1br/ — Huangism, Jul 13 '17 at 19:39

Sam · Answer 1 · 2017-07-13T19:37:19.267

0

Add a reference to #tab-name in the <a> element

For example:

<div class="ele" id="six"><a href="#tab-build"><label style="color:#fff;" class="text2line" for="tab-build">Build A Deep Bench</label></a></div>

Then in the <div> element add another <a> element with name of the reference made:

<div class="tab">
    <a name="tab-build"></a>
    <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>

This requires no Javascript, and you just have to make some adjustments to the a element CSS styling which is pretty simple.

edited Jul 13 '17 at 19:37

answered Jul 13 '17 at 19:26

Sam

2,655
3
14
29

If I do that the accordion no longer opens – David Kris Jul 13 '17 at 19:29
@ColeGwozdecki are you 100% opposed to using Javascript? – Sam Jul 13 '17 at 19:58
I would consider Vanilla JavaScript (no jquery) – David Kris Jul 13 '17 at 20:01

JiFus · Answer 2 · 2017-07-13T20:11:55.893

Edit:

I didn't see you also asked about opening the accordion, I'll maybe have a look at that later.

First remove the for attribute from the labels in the circle.

Then just add an anchor around the div containing the content, so for example:

<a href="#tab-one">
  <div class="ele" id="one">
    <label style="color:#fff;" class="text2line">
      Select A Top Team</label>
  </div>
</a>

I added a working JSFiddle right here.

.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;
}

.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">
  <a href="#tab-one">
    <div class="ele" id="one">
      <label style="color:#fff;" class="text2line">
        Select A Top Team</label>
    </div>
  </a>
  <a href="#tab-two">
    <div class="ele" id="two">
      <label style="color:#fff;" class="text2line">Get Off To A Great Start</label>
    </div>
  </a>
  <a href="#tab-train">
    <div class="ele" id="three">
      <label style="color:#fff;" class="text2line">Train For Success</label>
    </div>
  </a>

  <a href="#tab-manage">
    <div class="ele" id="four">
      <label style="color:#fff;" class="text2line">Manage Work For Results</label>
    </div>
  </a>
  <a href="#tab-grow">
    <div class="ele" id="five">
      <label style="color:#fff;" class="text1line">Grow Careers</label>
    </div>
  </a>
  <a href="#tab-build">
    <div class="ele" id="six">
      <label style="color:#fff;" class="text2line">Build A Deep Bench</label>
    </div>
  </a>
  <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 id="firstTab" 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>

Huangism · Answer 3 · 2017-07-13T20:48:15.293

0

Just add an anchor tag wrapping the label itself with href="#ID-name"

<div class="ele" id="one"><a class="label-wrapper" href="#tab-one"><label style="color:#fff;" class="text2line" for="tab-one">Select A Top Team</label></a></div>

CSS

.text2line {
    font-size: 13px;
    height: 100%;
    display: block;
    color: white;
    text-decoration: none;
    text-align: center;
}

https://jsfiddle.net/8vwfr1br/2/

I had to adjust some css to make the anchor and label the same height. You can play around with it because the styles on it are not the same as before for tex2line. You can probably fix it easily by setting padding top for text2line

I think you might of attached the css twice because each class is repeated 2 times. I removed the duplicate css in the fiddle

edited Jul 13 '17 at 20:48

answered Jul 13 '17 at 20:25

Huangism

15,324
5
45
64

That stops the accordion from opening then – David Kris Jul 13 '17 at 20:26
Yea nvm I tried this before and it worked not sure why it is not now – Huangism Jul 13 '17 at 20:27
@ColeGwozdecki actually nevermind, it does work, if you click on the text itself, it just means you need to change the css so the anchor is as tall as your label is. I tested on chrome, the only minor issue is saw was it doesn't lineup to the div exactly – Huangism Jul 13 '17 at 20:33
@ColeGwozdecki I have adjusted my answer and attached a fiddle – Huangism Jul 13 '17 at 20:44
Oh yea I see, apparently IE11 opens the accordion but does not scroll. It looks like for IE11, it seems it either opens the accordion and not scroll or scrolls and does not open accordion(if you put anchor inside of label). You will need js then – Huangism Jul 13 '17 at 20:57
So not possible with pure css? Dang. – David Kris Jul 13 '17 at 20:59
Doesn't look like it, you can check some other browsers, IE could be the only one that doesn't work – Huangism Jul 14 '17 at 12:39

go to specific accordion tab when click pure css

3 Answers3

Linked