<div class="toggle">
<button aria-controls="content">Reveal</button>
<div id="content" class="feedback">
<p>Ta-da!</p>
</div><!--/#content-->
</div><!--/.toggle-->
:focus {
outline: 0.0625em dotted rgba(0, 0, 0, 0.25);
}
.toggle {
position: relative;
display: inline-block;
}
.toggle [aria-hidden] {
position: absolute;
left: 0;
top: 100%;
width: 100%;
}
.toggle [aria-hidden='true'] {
display: none;
}
.toggle [aria-hidden='false'] {
display: inline-block;
z-index: 2;
}
button {
box-sizing: border-box;
white-space: nowrap;
cursor: pointer;
display: inline-block;
font-size: 1em;
font-variant: small-caps;
text-align: center;
text-transform: lowercase;
text-indent: 0.125em;
text-shadow: 0 -0.0625em 0 rgba(0, 0, 0, 0.25);
letter-spacing: 0.125em;
line-height: 1;
border: 0.0625em solid;
border-radius: 0.25em;
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.2));
transition: all 0.1s linear;
padding: 0.375em 1em 0.5em;
margin: 0;
box-shadow: inset 0 0.0625em 0.0625em rgba(255, 255, 255, 0.25);
color: #ffc;
color: rgba(255, 255, 204, 0.9);
background-color: #c63;
border-color: #8f4724;
border-bottom-color: #7a3d1f;
border-top-color: #c63;
}
button:hover,
button:focus {
background-color: #b85c2e;
border-color: #7a3d1f;
border-bottom-color: #66331a;
border-top-color: #b85c2e;
}
button:focus {
box-shadow: 0 0 0.5em 0 rgba(0, 0, 0, 0.25);
}
button:active {
background-color: #a35229;
border-color: #a35229;
}
.feedback {
display: block;
padding: 0.25em 1em;
background-color: #fc3;
color: #300;
color: rgba(0, 0, 0, 0.8);
box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.1);
border: 0.1875em double rgba(0, 0, 0, 0.1);
border-radius: 0.125em;
box-sizing: border-box;
border-top-width: 0;
margin-top: -0.125em;
}
@keyframes swingdown {
from {
transform: perspective(100vh) rotate3d(1, 0, 0, -90deg);
}
to {
transform: perspective(100vh);
}
}
.feedback[aria-hidden='false'] {
transform-origin: center top;
animation-name: swingdown;
animation-duration: 0.15s;
animation-iteration-count: 1;
animation-direction: normal;
}
(function(win, doc) {
'use strict';
if (!doc.querySelectorAll || !win.addEventListener) {
// doesn't cut the mustard.
return;
}
var toggles = doc.querySelectorAll('[aria-controls]');
var togglecount = toggles.length;
var toggleID;
var togglecontent;
var i;
var target;
for (i = 0; i < togglecount; i = i + 1) {
toggleID = toggles[i].getAttribute('aria-controls');
togglecontent = doc.getElementById(toggleID);
togglecontent.setAttribute('aria-hidden', 'true');
togglecontent.setAttribute('tabindex', '-1');
toggles[i].setAttribute('aria-expanded', 'false');
}
function toggle(ev) {
ev = ev || win.event;
target = ev.target || ev.srcElement;
if (target.hasAttribute('aria-controls')) {
toggleID = target.getAttribute('aria-controls');
togglecontent = doc.getElementById(toggleID);
if (togglecontent.getAttribute('aria-hidden') == 'true') {
togglecontent.setAttribute('aria-hidden', 'false');
target.setAttribute('aria-expanded', 'true');
//togglecontent.focus(); https://github.com/edenspiekermann/a11y-toggle/issues/10
} else {
togglecontent.setAttribute('aria-hidden', 'true');
target.setAttribute('aria-expanded', 'false');
}
}
}
doc.addEventListener('click', toggle, false);
}(this, this.document));
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.