Accessibility issue with pure CSS accordion
To start with, you shouldn't be using a checkbox to collapse/expand any element (bad practice). You can instead use a <button>
that would trigger/control this functionality and on this button you should further add the proper ARIA values.
You can look into the following ARIA attributes to help you further enable accessibility on a collapsible element.
aria-expanded="false"
aria-controls="collapsedElementId"
For example, Bootstrap's implementation of the collapse component uses such markup to enhance accessibility: https://getbootstrap.com/docs/4.1/components/collapse/#accessibility
Pure CSS accordion not working within CSS tabs
The main issue is the z-index: -1
set in your .w3c > div:target > div
rule. Change it to 1
and it will move the target to the top.
A second issue is where you set bottom: 0
in the .w3c > div > div
rule. This will prevent itself from size with its content. I removed it and added min-height: 100%;
Updated fiddle
Stack snippet
/* Acordeon styles */
.tab1 { position: relative; margin-bottom: 1px; width: 100%; color: #0072c6; overflow: hidden;}
.tab1 p { color: black;}
.tab > input { position: absolute; opacity: 0;}
.tab > label { position: relative; display: block; padding: 0 0 0 1em; /*background-color:aliceblue; font-weight: bold;*/ line-height: 3; cursor: pointer;}
.blue label { background: #2980b9;}
.tab-content { max-height: 0; overflow: hidden; background: white; -webkit-transition: max-height .35s; -o-transition: max-height .35s; transition: max-height .35s;}
.blue .tab-content { background: #3498db;}
.tab-content p { margin: 1em;}
.tab > input:checked ~ .tab-content { max-height: 100%;}
.tab > label::after { position: absolute; left: -20px; top: -9px; display: block; width: 3em; height: 3em; line-height: 3em; text-align: center; -webkit-transition: all .35s; -o-transition: all .35s; transition: all .35s;}
.tab > input[type=checkbox] + label::after { content: " + "; font-size: 18px; font-weight: 900;}
.tab > input[type=radio] + label::after { content: " \25BC ";}
.tab > input[type=checkbox]:checked + label::after { transform: rotate(315deg);}
.tab > input[type=radio]:checked + label::after { transform: rotateX(180deg);}
.row { background-color: white;}
.ms-srch-sb { min-width: 150px !important;}
.page-wrap { width: 80%; margin: 0 auto;}
input[type="radio"] { position: absolute; top: -9999px; left: -9999px;}
.tab-wrap { width: 100%; float: none; list-style: none; position: relative; margin: 0 auto; padding: 0; text-align: left;}
.tab-wrap li { float: left; display: block;}
.tab-wrap label { position: relative; display: inline-block; padding: 1.5em 1.5em 1em; color: inherit; text-decoration: none; margin: 0 10px 0 0px;}/*.label-1 { z-index: 100;}
.label-2 { z-index: 90;}
.label-3 { z-index: 80;}*/.tab-wrap label:before { content: ''; position: absolute; top: 0; right: 0; bottom: 10px; left: 0; /*z-index: -1;*/ border: .1em solid #aaa; border-bottom: none; border-radius: 10px 10px 0 0; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(229, 229, 229, 1))); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%); -webkit-transform: perspective(5px) rotateX(2deg); transform: perspective(5px) rotateX(2deg); -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left;}
.tab-wrap .tab-content { /*z-index: 200;*/ display: none; overflow: hidden; width: 100%; position: absolute; top: 53px; left: 0; padding: 20px; background: #fff; border-radius: 3px; border: .1em solid #aaa; border-top: 0;}
.tab-wrap [id^="tab"]:checked + label { /*z-index: 200;*/ margin-bottom: -1px; border-top-width: 1px;}
.tab-wrap [id^="tab"]:checked + label:before { background: #fff;}
.tab-wrap [id^="tab"]:checked ~ .tab-content { display: block;}
/* Stuff for example six */
.w3c { min-height: 150px; position: relative; width: 100%;}
.w3c > div { display: inline;}
.w3c > div > a { margin-left: -1px; position: relative; left: 1px; text-decoration: none; color: black; background: white; display: block; float: left; padding: 5px 10px; border: 1px solid #ccc; border-bottom: 1px solid white;}
.w3c > div:not(:target) > a { border-bottom: 0; background: -moz-linear-gradient(top, white, #eee);}
.w3c > div:target > a { background: white;}
.w3c > div > div { background: white; /*z-index: -2;*/ left: 0; top: 30px; /*bottom: 0;*/ min-height: 100%; /* added so it grows with content */ right: 0; padding: 20px; border: 1px solid #ccc;}
.w3c > div:not(:target) > div { position: absolute;}
.w3c > div:target > div { position: absolute; z-index: 1;}
<div class="w3c"> <div id="tab16"> <a href="#tab16">Tab 16</a> <div> <div class="tab"> <input id="tab-one" type="checkbox" name="tabs"> <label for="tab-one">Introduction to SharePoint</label> <div class="tab-content"> <div> <div class="column2"> <a href=""><img src="../images/classroom1.png"></a> <a href=""><img src="../images/document1.png"></a> <a href=""><img src="../images/presentation1.png"></a> <a href=""><img src="../images/video1.png"></a> </div> </div> </div> </div> <div class="tab"> <input id="tab-two" type="checkbox" name="tabs"> <label for="tab-two">Label Two</label> <div class="tab-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p> </div> </div> <div class="tab"> <input id="tab-three" type="checkbox" name="tabs"> <label for="tab-three">Label Three</label> <div class="tab-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p> </div> </div> </div> </div> <div id="tab17"> <a href="#tab17">Tab 17</a> <div>... 30 lines of CSS is rather a lot, and...</div> </div> <div id="tab18"> <a href="#tab18">Tab 18</a> <div>... that 2 should have been enough, but...</div> </div></div>
Pure CSS Accordion - Reveal Content Issue
Just posting the changes to the css
#accordion section p {
color:#bebebe;
margin-top:20px;
max-height:0;
overflow: hidden;
transition: max-height 0.5s ease-in;
}
#accordion section:target p {
max-height:100px;
overflow:none;
transition: max-height 0.5s ease-in;
}
Demo : http://jsbin.com/rivayagehe/edit?html,css,output
It's a bit rough and may need some polishing
Related Topics
How to Get Firefox to Show an Auto Horizontal Scollbar for a Div
Fill Parent Container and Reduce Image Resolution with Next/Image
CSS: Not(), Selectors and Selecting Descendants
Cant Edit CSS Style Properties (Grayed Out & Blocked) in Chrome
Which Browsers Still Support CSS Expressions
Can The CSS: Part Pseudo-Selector Be Used to Style Nested Web Components
Background Image Width Not 100% on Ipad
CSS Selector Compare 2 Attributes
Javafx Style All Nodes of The Same Type, E.G., Vbox
Why Is Fixed Background Image on Chrome Not Working
How to Make Three Columns The Same Height
Input Doesn't Respect Flex Container Width
Lesscss - Ie Gradient Filter with Variables and Lighten