Go to the dedicated accordion tab when click pure css
I have below code for loop and accordion which I made using pure css. When you click on a loop title, it opens the assigned accordion tab. How can I make it open the accordion plugin and also scroll down to it, but with clean css? I tried to add a tag <a href="">
to the label but it didn't work. Any thoughts? Greetings.
.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 "</strong><span class="ms-rteThemeForeColor-5-0"><strong>+</strong></span><strong>" to expand and the "</strong><span class="ms-rteThemeForeColor-5-0"><strong>x</strong></span><strong>" 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>
+3
source to share
3 answers
Add link to #tab-name
in element<a>
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 element <div>
add another element <a>
with the name of the link you 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>
It doesn't require Javascript and you just need to do some styling changes to the CSS a
, which is pretty simple.
0
source to share
Edit:
I didn't see you ask about opening the accordion either, maybe I'll look at that later.
First remove the attribute for
from the labels in the circle.
Then just add an anchor around the div containing the content, like this:
<a href="#tab-one">
<div class="ele" id="one">
<label style="color:#fff;" class="text2line">
Select A Top Team</label>
</div>
</a>
I've added a working JSFiddle 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 "</strong><span class="ms-rteThemeForeColor-5-0"><strong>+</strong></span><strong>" to expand and the "</strong><span class="ms-rteThemeForeColor-5-0"><strong>x</strong></span><strong>" 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>
0
source to share
Just add an anchor tag that wraps the shortcut itself 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 mark the same height. You can play with it because the styles on it are not the same as before for tex2line. Perhaps you can fix this easily by setting the top padding to text2line
I think you could link the css twice, because each class is repeated 2 times. I removed duplicate css in fiddle
0
source to share