clickable links inside accordion (HTML CSS ONLY)
Question
i made this accordion with checkbox write in only CSS and HTML, however the clickable content inside each accordion is not clickable anymore, because now when i click on it, the accordion just closed,
how can i make the links/videos inside clickable again? Thank you very much in advance,
ul li i:before { -webkit-transform: translate(-2px, 0) rotate(45deg); transform: translate(-2px, 0) rotate(45deg); } ul li i:after { -webkit-transform: translate(2px, 0) rotate(-45deg); transform: translate(2px, 0) rotate(-45deg); } ul li input[type=checkbox] { position: absolute; cursor: pointer; width: 100%; height: 100%; z-index: 1; opacity: 0; } ul li input[type=checkbox]:checked ~ p { margin-top: 0; max-height: 0; opacity: 0; -webkit-transform: translate(0, 50%); transform: translate(0, 50%); }
<body> <ul> <li> <input type="checkbox" checked> <h2>Title</h2> <p>click <a href="https://www.google.nl/ "> here</a></p> </li> </ul> </body>
2 answers
solution1
0 ACCPTED 2019-03-19 09:50:04
Your problem is that the checkbox is positioned absolutely so when clicking on your link, you are actually still clicking on the checkbox.
To fix this add
ul li {
position: relative;
}
and then
ul li input ~ p {
position: relative;
z-index: 2;
}
So your content appears above the checkbox.
solution2
0 2019-03-19 09:56:30
You could use z-index and give your link a class name.
ul li i:before { -webkit-transform: translate(-2px, 0) rotate(45deg); transform: translate(-2px, 0) rotate(45deg); } ul li i:after { -webkit-transform: translate(2px, 0) rotate(-45deg); transform: translate(2px, 0) rotate(-45deg); } ul li input[type=checkbox] { position: absolute; cursor: pointer; width: 100%; height: 100%; z-index: 1; opacity: 0; } ul li input[type=checkbox]:checked ~ p { margin-top: 0; max-height: 0; opacity: 0; -webkit-transform: translate(0, 50%); transform: translate(0, 50%); } .clickable{ z-index:100; position:relative; }
<body> <ul> <li> <input type="checkbox" checked> <h2>Title</h2> <p class="clickable">click <a href="https://www.google.nl/ "> here</a></p> </li> </ul> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.