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
Your
<input type="checkbox" />
element is blocking the entire contentIn your CSS, you have
position: absolute;
andheight: 100%;
applied to the<input />
element. This forces theinput
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 theinput
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.
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 addposition: inherit; z-index: 1;
in.an-conteudo
in the CSS section to solve this.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.