Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Go To Specific Accordion Tab When Click Pure Css

Post a Comment
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

Solution 1:

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

For example:

<divclass="ele"id="six"><ahref="#tab-build"><labelstyle="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: 

<divclass="tab"><aname="tab-build"></a><inputname="tabs"class="input"id="tab-build"type="checkbox" /><labelclass="label"for="tab-build">Build A Deep bench</label><divclass="tab-content"><divclass="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.

Solution 2:

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:

<ahref="#tab-one"><divclass="ele"id="one"><labelstyle="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: 0px1px5px#888888;
  z-index: 3;
}

.ele:hover {
  cursor: pointer;
  transform: scale(1.019);
  border-color: f4f4f4;
  background-color: #214d84;
  box-shadow: 0px2px9px#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: 0px1px5px#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: 0001em;
  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: 0px1px5px#888888;
  z-index: 3;
}

.ele:hover {
  cursor: pointer;
  transform: scale(1.019);
  border-color: f4f4f4;
  background-color: #214d84;
  box-shadow: 0px2px9px#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: 0px1px5px#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: 0001em;
  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;
}
<divclass="container1"><ahref="#tab-one"><divclass="ele"id="one"><labelstyle="color:#fff;"class="text2line">
        Select A Top Team</label></div></a><ahref="#tab-two"><divclass="ele"id="two"><labelstyle="color:#fff;"class="text2line">Get Off To A Great Start</label></div></a><ahref="#tab-train"><divclass="ele"id="three"><labelstyle="color:#fff;"class="text2line">Train For Success</label></div></a><ahref="#tab-manage"><divclass="ele"id="four"><labelstyle="color:#fff;"class="text2line">Manage Work For Results</label></div></a><ahref="#tab-grow"><divclass="ele"id="five"><labelstyle="color:#fff;"class="text1line">Grow Careers</label></div></a><ahref="#tab-build"><divclass="ele"id="six"><labelstyle="color:#fff;"class="text2line">Build A Deep Bench</label></div></a><divclass="arrow"></div><divclass="circle"><astyle="color:#fff;"class="textcircle">Manager</a></div></div><brstyle="line-height:400px;" /><divclass="top"><p><spanstyle="font-family: verdana;"><strong>Click the &quot;</strong><spanclass="ms-rteThemeForeColor-5-0"><strong>+</strong></span><strong>&quot; to expand and the &quot;</strong><spanclass="ms-rteThemeForeColor-5-0"><strong>x</strong></span><strong>&quot; to collapse</strong></span></p></div><divclass="wrapper"><divid="firstTab"class="tab"><inputname="tabs"class="input"id="tab-one"type="checkbox" /><labelclass="label"for="tab-one">Select A Top Team</label><divclass="tab-content"><divclass="container"><p>Content goes here</p></div></div></div><divclass="tab"><inputname="tabs"class="input"id="tab-two"type="checkbox" /><labelclass="label"for="tab-two">Get Off To A Great Start</label><divclass="tab-content"><divclass="container"><p>Content goes here</p></div></div></div><divclass="tab"><inputname="tabs"class="input"id="tab-train"type="checkbox" /><labelclass="label"for="tab-train">Train For Success</label><divclass="tab-content"><divclass="container"><p>Content goes here</p></div></div></div><divclass="tab"><inputname="tabs"class="input"id="tab-manage"type="checkbox" /><labelclass="label"for="tab-manage">Manage Work For Results</label><divclass="tab-content"><divclass="container"><p>Content goes here</p></div></div></div><divclass="tab"><inputname="tabs"class="input"id="tab-grow"type="checkbox" /><labelclass="label"for="tab-grow">Grow Careers</label><divclass="tab-content"><divclass="container"><p>Content goes here</p></div></div></div><divclass="tab"><inputname="tabs"class="input"id="tab-build"type="checkbox" /><labelclass="label"for="tab-build">Build A Deep bench</label><divclass="tab-content"><divclass="container"><p>Content goes here</p></div></div></div><divclass="bottombar"></div></div>

Solution 3:

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

<divclass="ele"id="one"><aclass="label-wrapper"href="#tab-one"><labelstyle="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

Post a Comment for "Go To Specific Accordion Tab When Click Pure Css"