A jQuery plugin for accessible content toggles. Inspired by Heydon Pickering's progressive collapsibles and toggleSingle() from Magento's RWD theme.
<button class="toggle-next">Navigation</button>
<nav>
<!-- stuff -->
</nav>
<h2 class="toggle-next">What happens next?</h2>
<p>Surprise!</p>
<script src="jquery.peekaboo.js"></script>
<script>
$('.toggle-next').peekaboo();
</script>
[aria-hidden="true"] {
display: none;
}
[aria-hidden="false"] {
display: block;
}
You can specify the ID of the content you'd like to toggle using the data-toggle-target
attribute. This is useful if the content doesn't immediately follow the toggle button in your document.
<button class="toggle-next" data-toggle-target="nav">Navigation</button>
<!-- stuff -->
<nav id="nav">
<!-- stuff -->
</nav>