Pure CSS Accordion Issue

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



Leave a reply



Submit