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:

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


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:

<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>

Solution 3:

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


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