skip to Main Content

I have this pure CSS accordion code below. It works well but when I include a link inside the the link is not directed to what is in the href="" and ends up closing the accordion tab.

I’ve tried several examples but nothing worked. Does anyone know how I can resolve this?

Thanks.

$('.an-conteudo a').click(function(event){
    event.stopPropagation();
});
.accordion-an .transition, ul li i:before, ul li i:after, div {
  transition: all 0.25s ease-in-out;
}
.accordion-an .flipIn, ul li, h1 {
  animation: flipdown 0.5s ease both;
}
.accordion-an .no-select, h2 {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.accordion-an h2 {
  color: #fff;
  background-color: #00A08F;
  padding: 15px;
  font-size: 26px;
  line-height: 34px;
  font-weight: 300;
  letter-spacing: 1px;
  display: block;
  margin: 0;
  cursor: pointer;
}
.accordion-an ul {
  list-style: none;
  perspective: 900;
  padding: 0;
  margin: 0;
}
.accordion-an ul li {
  position: relative;
  padding: 0;
  margin: 0;
  padding-bottom: 4px;
  padding-top: 18px;
  border-top: 1px dotted #dce7eb;
}
.accordion-an ul li:nth-of-type(1) {
  animation-delay: 0.5s;
}
.accordion-an ul li:nth-of-type(2) {
  animation-delay: 0.75s;
}
.accordion-an ul li:nth-of-type(3) {
  animation-delay: 1s;
}
.accordion-an ul li:last-of-type {
  padding-bottom: 0;
}
.accordion-an ul li i {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 16px;
  right: 0;
}
.accordion-an ul li i:before, ul li i:after {
  content: "";
  position: absolute;
  background-color: #fff;
  width: 3px;
  height: 9px;
  margin-left: -20px;
  margin-top: 10px;
}
.accordion-an ul li i:before {
  transform: translate(-2px, 0) rotate(45deg);
}
.accordion-an ul li i:after {
  transform: translate(2px, 0) rotate(-45deg);
}
.accordion-an ul li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
}
.accordion-an ul li input[type=checkbox]:checked ~ div {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  transform: translate(0, 50%);
}
.accordion-an ul li input[type=checkbox]:checked ~ i:before {
  transform: translate(2px, 0) rotate(45deg);
}
.accordion-an ul li input[type=checkbox]:checked ~ i:after {
  transform: translate(-2px, 0) rotate(-45deg);
}
.an-conteudo {padding-top: 10px;}

@keyframes flipdown {
  0% {
    opacity: 0;
    transform-origin: top center;
    transform: rotateX(-90deg);
  }
  5% {
    opacity: 1;
  }
  80% {
    transform: rotateX(8deg);
  }
  83% {
    transform: rotateX(6deg);
  }
  92% {
    transform: rotateX(-3deg);
  }
  100% {
    transform-origin: top center;
    transform: rotateX(0deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion-an">

<ul>
  <li>
    <input type="checkbox" class="an-checkbox">
    <i></i>
    <h2>Languages Used</h2>
    <div class="an-conteudo">This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.
    <br>
    <a href="https://intranet.zoosis.br/members/empresa" class="an-titulo">Link da empresa</a>

    </div>
  </li>
  <li>
    <input type="checkbox" checked class="an-checkbox">
    <i></i>
    <h2>How it Works</h2>
    <div class="an-conteudo">Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.</div>
  </li>
  <li>
    <input type="checkbox" checked class="an-checkbox">
    <i></i>
    <h2>Points of Interest</h2>
    <div class="an-conteudo">By making the open state default for when :checked isn't detected, we can make this system accessable for browsers that don't recognize :checked. The fallback is simply an open accordion. The accordion can be manipulated with Javascript (if needed) by changing the "checked" property of the input element.</div>
  </li>
</ul>

</div>

3

Answers


  1. Your <input type="checkbox" /> element is blocking the entire content

    In your CSS, you have position: absolute; and height: 100%; applied to the <input /> element. This forces the input element to cover the entire height of the <li />‘s area, effectively stopping any pointer interaction from happening inside it. That is, your hyperlink texts are not even being clicked; instead, you’re still clicking the input element.

    In the updated snippet here, I made only one change: giving the input element an explicit height. It’s the same height as <H2> element (i.e. line-height + padding), so that the accordion heading will be the only portion that handles collapse/expand of the given section.

    Try it out.

    $('.an-conteudo a').click(function(event){
        event.stopPropagation();
    });
    .accordion-an .transition, ul li i:before, ul li i:after, div {
      transition: all 0.25s ease-in-out;
    }
    .accordion-an .flipIn, ul li, h1 {
      animation: flipdown 0.5s ease both;
    }
    .accordion-an .no-select, h2 {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    .accordion-an h2 {
      color: #fff;
      background-color: #00A08F;
      padding: 15px;
      font-size: 26px;
      line-height: 34px;
      font-weight: 300;
      letter-spacing: 1px;
      display: block;
      margin: 0;
      cursor: pointer;
    }
    .accordion-an ul {
      list-style: none;
      perspective: 900;
      padding: 0;
      margin: 0;
    }
    .accordion-an ul li {
      position: relative;
      padding: 0;
      margin: 0;
      padding-bottom: 4px;
      padding-top: 18px;
      border-top: 1px dotted #dce7eb;
    }
    .accordion-an ul li:nth-of-type(1) {
      animation-delay: 0.5s;
    }
    .accordion-an ul li:nth-of-type(2) {
      animation-delay: 0.75s;
    }
    .accordion-an ul li:nth-of-type(3) {
      animation-delay: 1s;
    }
    .accordion-an ul li:last-of-type {
      padding-bottom: 0;
    }
    .accordion-an ul li i {
      position: absolute;
      transform: translate(-6px, 0);
      margin-top: 16px;
      right: 0;
    }
    .accordion-an ul li i:before, ul li i:after {
      content: "";
      position: absolute;
      background-color: #fff;
      width: 3px;
      height: 9px;
      margin-left: -20px;
      margin-top: 10px;
    }
    .accordion-an ul li i:before {
      transform: translate(-2px, 0) rotate(45deg);
    }
    .accordion-an ul li i:after {
      transform: translate(2px, 0) rotate(-45deg);
    }
    .accordion-an ul li input[type=checkbox] {
      position: absolute;
      cursor: pointer;
      width: 100%;
      height: 64px; /* Same height as H2 element */ 
      z-index: 1;
      opacity: 0;
    }
    .accordion-an ul li input[type=checkbox]:checked ~ div {
      margin-top: 0;
      max-height: 0;
      opacity: 0;
      transform: translate(0, 50%);
    }
    .accordion-an ul li input[type=checkbox]:checked ~ i:before {
      transform: translate(2px, 0) rotate(45deg);
    }
    .accordion-an ul li input[type=checkbox]:checked ~ i:after {
      transform: translate(-2px, 0) rotate(-45deg);
    }
    .an-conteudo {padding-top: 10px;}
    
    @keyframes flipdown {
      0% {
        opacity: 0;
        transform-origin: top center;
        transform: rotateX(-90deg);
      }
      5% {
        opacity: 1;
      }
      80% {
        transform: rotateX(8deg);
      }
      83% {
        transform: rotateX(6deg);
      }
      92% {
        transform: rotateX(-3deg);
      }
      100% {
        transform-origin: top center;
        transform: rotateX(0deg);
      }
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="accordion-an">
    
    <ul>
      <li>
        <input type="checkbox" class="an-checkbox">
        <i></i>
        <h2>Languages Used</h2>
        <div class="an-conteudo">This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.
        <br>
        <a href="https://intranet.zoosis.br/members/empresa" class="an-titulo">Link da empresa</a>
    
        </div>
      </li>
      <li>
        <input type="checkbox" checked class="an-checkbox">
        <i></i>
        <h2>How it Works</h2>
        <div class="an-conteudo">Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.</div>
      </li>
      <li>
        <input type="checkbox" checked class="an-checkbox">
        <i></i>
        <h2>Points of Interest</h2>
        <div class="an-conteudo">By making the open state default for when :checked isn't detected, we can make this system accessable for browsers that don't recognize :checked. The fallback is simply an open accordion. The accordion can be manipulated with Javascript (if needed) by changing the "checked" property of the input element.</div>
      </li>
    </ul>
    
    </div>
    Login or Signup to reply.
  2. You need to make the .an-conteudo element appear at the top of the user’s point of view to make that link can be clicked. Just try to add position: inherit; z-index: 1; in .an-conteudo in the CSS section to solve this.

    $('.an-conteudo a').click(function(event){
        event.stopPropagation();
    });
    .accordion-an .transition, ul li i:before, ul li i:after, div {
      transition: all 0.25s ease-in-out;
    }
    .accordion-an .flipIn, ul li, h1 {
      animation: flipdown 0.5s ease both;
    }
    .accordion-an .no-select, h2 {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    .accordion-an h2 {
      color: #fff;
      background-color: #00A08F;
      padding: 15px;
      font-size: 26px;
      line-height: 34px;
      font-weight: 300;
      letter-spacing: 1px;
      display: block;
      margin: 0;
      cursor: pointer;
    }
    .accordion-an ul {
      list-style: none;
      perspective: 900;
      padding: 0;
      margin: 0;
    }
    .accordion-an ul li {
      position: relative;
      padding: 0;
      margin: 0;
      padding-bottom: 4px;
      padding-top: 18px;
      border-top: 1px dotted #dce7eb;
    }
    .accordion-an ul li:nth-of-type(1) {
      animation-delay: 0.5s;
    }
    .accordion-an ul li:nth-of-type(2) {
      animation-delay: 0.75s;
    }
    .accordion-an ul li:nth-of-type(3) {
      animation-delay: 1s;
    }
    .accordion-an ul li:last-of-type {
      padding-bottom: 0;
    }
    .accordion-an ul li i {
      position: absolute;
      transform: translate(-6px, 0);
      margin-top: 16px;
      right: 0;
    }
    .accordion-an ul li i:before, ul li i:after {
      content: "";
      position: absolute;
      background-color: #fff;
      width: 3px;
      height: 9px;
      margin-left: -20px;
      margin-top: 10px;
    }
    .accordion-an ul li i:before {
      transform: translate(-2px, 0) rotate(45deg);
    }
    .accordion-an ul li i:after {
      transform: translate(2px, 0) rotate(-45deg);
    }
    .accordion-an ul li input[type=checkbox] {
      position: absolute;
      cursor: pointer;
      width: 100%;
      height: 100%;
      z-index: 1;
      opacity: 0;
    }
    .accordion-an ul li input[type=checkbox]:checked ~ div {
      margin-top: 0;
      max-height: 0;
      opacity: 0;
      transform: translate(0, 50%);
    }
    .accordion-an ul li input[type=checkbox]:checked ~ i:before {
      transform: translate(2px, 0) rotate(45deg);
    }
    .accordion-an ul li input[type=checkbox]:checked ~ i:after {
      transform: translate(-2px, 0) rotate(-45deg);
    }
    .an-conteudo {padding-top: 10px;}
    
    @keyframes flipdown {
      0% {
        opacity: 0;
        transform-origin: top center;
        transform: rotateX(-90deg);
      }
      5% {
        opacity: 1;
      }
      80% {
        transform: rotateX(8deg);
      }
      83% {
        transform: rotateX(6deg);
      }
      92% {
        transform: rotateX(-3deg);
      }
      100% {
        transform-origin: top center;
        transform: rotateX(0deg);
      }
    }
    
    .an-conteudo {
      position: inherit;
      z-index: 1;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="accordion-an">
    
    <ul>
      <li>
        <input type="checkbox" class="an-checkbox">
        <i></i>
        <h2>Languages Used</h2>
        <div class="an-conteudo">This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.
        <br>
        <a href="https://intranet.zoosis.br/members/empresa" class="an-titulo">Link da empresa</a>
    
        </div>
      </li>
      <li>
        <input type="checkbox" checked class="an-checkbox">
        <i></i>
        <h2>How it Works</h2>
        <div class="an-conteudo">Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.</div>
      </li>
      <li>
        <input type="checkbox" checked class="an-checkbox">
        <i></i>
        <h2>Points of Interest</h2>
        <div class="an-conteudo">By making the open state default for when :checked isn't detected, we can make this system accessable for browsers that don't recognize :checked. The fallback is simply an open accordion. The accordion can be manipulated with Javascript (if needed) by changing the "checked" property of the input element.</div>
      </li>
    </ul>
    
    </div>
    Login or Signup to reply.
  3. The thing is that your input .accordion-an ul li input[type=checkbox] is getting 100% height so when you click on the container, it automatically close the tab.

    You need to set the height to fix it.

    .accordion-an ul li input[type=checkbox] {
      position: absolute;
      cursor: pointer;
      width: 100%;
      height: 60px; /* here is the change */
      z-index: 1;
      opacity: 0;
    }
    
    $('.an-conteudo a.an-titulo').click(function(event){
        event.preventDefault();
        console.log("Do something..");
    });
    .accordion-an .transition, ul li i:before, ul li i:after, div {
      transition: all 0.25s ease-in-out;
    }
    .accordion-an .flipIn, ul li, h1 {
      animation: flipdown 0.5s ease both;
    }
    .accordion-an .no-select, h2 {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    .accordion-an h2 {
      color: #fff;
      background-color: #00A08F;
      padding: 15px;
      font-size: 26px;
      line-height: 34px;
      font-weight: 300;
      letter-spacing: 1px;
      display: block;
      margin: 0;
      cursor: pointer;
    }
    .accordion-an ul {
      list-style: none;
      perspective: 900;
      padding: 0;
      margin: 0;
    }
    .accordion-an ul li {
      position: relative;
      padding: 0;
      margin: 0;
      padding-bottom: 4px;
      padding-top: 18px;
      border-top: 1px dotted #dce7eb;
    }
    .accordion-an ul li:nth-of-type(1) {
      animation-delay: 0.5s;
    }
    .accordion-an ul li:nth-of-type(2) {
      animation-delay: 0.75s;
    }
    .accordion-an ul li:nth-of-type(3) {
      animation-delay: 1s;
    }
    .accordion-an ul li:last-of-type {
      padding-bottom: 0;
    }
    .accordion-an ul li i {
      position: absolute;
      transform: translate(-6px, 0);
      margin-top: 16px;
      right: 0;
    }
    .accordion-an ul li i:before, ul li i:after {
      content: "";
      position: absolute;
      background-color: #fff;
      width: 3px;
      height: 9px;
      margin-left: -20px;
      margin-top: 10px;
    }
    .accordion-an ul li i:before {
      transform: translate(-2px, 0) rotate(45deg);
    }
    .accordion-an ul li i:after {
      transform: translate(2px, 0) rotate(-45deg);
    }
    .accordion-an ul li input[type=checkbox] {
      position: absolute;
      cursor: pointer;
      width: 100%;
      height: 60px;
      z-index: 1;
      opacity: 0;
    }
    .accordion-an ul li input[type=checkbox]:checked ~ div {
      margin-top: 0;
      max-height: 0;
      opacity: 0;
      transform: translate(0, 50%);
    }
    .accordion-an ul li input[type=checkbox]:checked ~ i:before {
      transform: translate(2px, 0) rotate(45deg);
    }
    .accordion-an ul li input[type=checkbox]:checked ~ i:after {
      transform: translate(-2px, 0) rotate(-45deg);
    }
    .an-conteudo {padding-top: 10px;}
    
    @keyframes flipdown {
      0% {
        opacity: 0;
        transform-origin: top center;
        transform: rotateX(-90deg);
      }
      5% {
        opacity: 1;
      }
      80% {
        transform: rotateX(8deg);
      }
      83% {
        transform: rotateX(6deg);
      }
      92% {
        transform: rotateX(-3deg);
      }
      100% {
        transform-origin: top center;
        transform: rotateX(0deg);
      }
    }
    
    a.an-titulo {
     position:relative
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="accordion-an">
    
    <ul>
      <li>
        <input type="checkbox" class="an-checkbox">
        <i></i>
        <h2>Languages Used</h2>
        <div class="an-conteudo">This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.
        <br>
        <a href="https://intranet.zoosis.br/members/empresa" class="an-titulo">Link da empresa</a>
    
        </div>
      </li>
      <li>
        <input type="checkbox" checked class="an-checkbox">
        <i></i>
        <h2>How it Works</h2>
        <div class="an-conteudo">Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.</div>
      </li>
      <li>
        <input type="checkbox" checked class="an-checkbox">
        <i></i>
        <h2>Points of Interest</h2>
        <div class="an-conteudo">By making the open state default for when :checked isn't detected, we can make this system accessable for browsers that don't recognize :checked. The fallback is simply an open accordion. The accordion can be manipulated with Javascript (if needed) by changing the "checked" property of the input element.</div>
      </li>
    </ul>
    
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search