Multi-accordion with Checkboxes
flowers (accordion)
Tablist help: use the accordion controls to toggle the visibility of their respective panels (below the controls).
Some info about rose
Bla bla bla… all about rose…
A link to a page with more infos about rose!
More elements can come here related to rose
Maybe even some form element where you can enter a name for your rose:
Some info about tulip
Bla bla bla… all about tulip…
A link to a page with more infos about tulip!
More elements can come here related to tulip
Maybe even some form element where you can enter a name for your tulip:
Some info about sunflower
Bla bla bla… all about sunflower…
A link to a page with more infos about sunflower!
More elements can come here related to sunflower
Maybe even some form element where you can enter a name for your sunflower:
Code
<p>
<button>Focusable element before</button>
</p>
<div class="accordion">
<h1 class="visually-hidden">
flowers (accordion)
</h1>
<p class="visually-hidden">
Tablist help: use the accordion controls to toggle the visibility of their respective panels (below the controls).
</p>
<div class="control">
<input checked="1" class="visually-hidden" id="accordion_flowers_panel_rose" type="checkbox" />
<h2>
<label for="accordion_flowers_panel_rose"><span class="visually-hidden">Show panel </span>rose</label>
</h2>
</div>
<div class="panel" id="accordion_flowers_panel_rose_panel">
<h3>
Some info about rose
</h3>
<p>
Bla bla bla... all about rose...
</p>
<p>
<img alt="A beautiful rose" src="..." />
</p>
<p>
A link to a page with <a href="#">more infos about rose</a>!
</p>
<h3>
More elements can come here related to rose
</h3>
<p>
Maybe even some form element where you can enter a name for your rose: <input type="text" />
</p>
</div>
<div class="control">
<input checked="1" class="visually-hidden" id="accordion_flowers_panel_tulip" type="checkbox" />
<h2>
<label for="accordion_flowers_panel_tulip"><span class="visually-hidden">Show panel </span>tulip</label>
</h2>
</div>
<div class="panel" id="accordion_flowers_panel_tulip_panel">
<h3>
Some info about tulip
</h3>
<p>
Bla bla bla... all about tulip...
</p>
<p>
<img alt="A beautiful tulip" src="..." />
</p>
<p>
A link to a page with <a href="#">more infos about tulip</a>!
</p>
<h3>
More elements can come here related to tulip
</h3>
<p>
Maybe even some form element where you can enter a name for your tulip: <input type="text" />
</p>
</div>
<div class="control">
<input checked="1" class="visually-hidden" id="accordion_flowers_panel_sunflower" type="checkbox" />
<h2>
<label for="accordion_flowers_panel_sunflower"><span class="visually-hidden">Show panel </span>sunflower</label>
</h2>
</div>
<div class="panel" id="accordion_flowers_panel_sunflower_panel">
<h3>
Some info about sunflower
</h3>
<p>
Bla bla bla... all about sunflower...
</p>
<p>
<img alt="A beautiful sunflower" src="..." />
</p>
<p>
A link to a page with <a href="#">more infos about sunflower</a>!
</p>
<h3>
More elements can come here related to sunflower
</h3>
<p>
Maybe even some form element where you can enter a name for your sunflower: <input type="text" />
</p>
</div>
</div>
<p>
<button>Focusable element after</button>
</p>.visually-hidden {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
body {
padding: 20px;
}
.accordion {
margin-bottom: 20px;
}
.control h2 {
margin-bottom: 0;
}
.control label {
display: block;
border: 1px solid black;
margin: 0 0 -1px 0;
padding: 4px 10px;
background-color: lightyellow;
}
.control label::before {
content: "+";
display: inline-block;
width: 0.75em;
font-weight: normal;
}
input[type=checkbox]:checked + h2 label {
border-bottom-color: lightyellow;
position: relative;
}
input[type=checkbox]:checked + h2 label::before {
content: "-";
}
a:focus,
input:focus,
input[type=checkbox]:focus + h2 label {
outline: 2px dotted red;
outline-offset: 2px;
}
input[type=checkbox] + h2 label:hover {
cursor: pointer;
text-decoration: underline;
}
.panel {
border: 1px solid;
background-color: lightyellow;
padding: 0 0 0 10px;
}(function() {
$(document).ready(function() {
return $("input[type='checkbox']").each((i, element) => {
var $checkbox;
$checkbox = $(element);
// Make Enter select/deselect checkbox (instead of submitting form)
$checkbox.keypress(function(e) {
if ((e.keyCode ? e.keyCode : e.which) === 13) {
return $(this).trigger('click');
}
});
return $checkbox.change(function() {
var $panel, panel_id;
panel_id = `#${$checkbox.attr('id')}_panel`;
$panel = $(panel_id);
if ($checkbox.is(':checked')) {
return $panel.show();
} else {
return $panel.hide();
}
});
});
});
}).call(this);
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFBQSxDQUFBLENBQUUsUUFBRixDQUFXLENBQUMsS0FBWixDQUFrQixRQUFBLENBQUEsQ0FBQTtXQUNoQixDQUFBLENBQUUsd0JBQUYsQ0FBMkIsQ0FBQyxJQUE1QixDQUFpQyxDQUFDLENBQUQsRUFBSSxPQUFKLENBQUEsR0FBQTtBQUNuQyxVQUFBO01BQUksU0FBQSxHQUFZLENBQUEsQ0FBRSxPQUFGLEVBQWhCOzs7TUFHSSxTQUFTLENBQUMsUUFBVixDQUFtQixRQUFBLENBQUMsQ0FBRCxDQUFBO1FBQ2pCLElBQUcsQ0FBSSxDQUFDLENBQUMsT0FBTCxHQUFrQixDQUFDLENBQUMsT0FBcEIsR0FBaUMsQ0FBQyxDQUFDLEtBQXBDLENBQUEsS0FBOEMsRUFBakQ7aUJBQ0UsQ0FBQSxDQUFFLElBQUYsQ0FBSSxDQUFDLE9BQUwsQ0FBYSxPQUFiLEVBREY7O01BRGlCLENBQW5CO2FBSUEsU0FBUyxDQUFDLE1BQVYsQ0FBaUIsUUFBQSxDQUFBLENBQUE7QUFDckIsWUFBQSxNQUFBLEVBQUE7UUFBTSxRQUFBLEdBQVcsQ0FBQSxDQUFBLENBQUEsQ0FBSSxTQUFTLENBQUMsSUFBVixDQUFlLElBQWYsQ0FBSixDQUFBLE1BQUE7UUFDWCxNQUFBLEdBQVcsQ0FBQSxDQUFFLFFBQUY7UUFFWCxJQUFHLFNBQVMsQ0FBQyxFQUFWLENBQWEsVUFBYixDQUFIO2lCQUNFLE1BQU0sQ0FBQyxJQUFQLENBQUEsRUFERjtTQUFBLE1BQUE7aUJBR0UsTUFBTSxDQUFDLElBQVAsQ0FBQSxFQUhGOztNQUplLENBQWpCO0lBUitCLENBQWpDO0VBRGdCLENBQWxCO0FBQUEiLCJzb3VyY2VzQ29udGVudCI6WyIkKGRvY3VtZW50KS5yZWFkeSAtPlxuICAkKFwiaW5wdXRbdHlwZT0nY2hlY2tib3gnXVwiKS5lYWNoIChpLCBlbGVtZW50KSA9PlxuICAgICRjaGVja2JveCA9ICQoZWxlbWVudClcbiAgICBcbiAgICAjIE1ha2UgRW50ZXIgc2VsZWN0L2Rlc2VsZWN0IGNoZWNrYm94IChpbnN0ZWFkIG9mIHN1Ym1pdHRpbmcgZm9ybSlcbiAgICAkY2hlY2tib3gua2V5cHJlc3MgKGUpIC0+XG4gICAgICBpZiAoaWYgZS5rZXlDb2RlIHRoZW4gZS5rZXlDb2RlIGVsc2UgZS53aGljaCkgPT0gMTNcbiAgICAgICAgJChAKS50cmlnZ2VyICdjbGljaydcblxuICAgICRjaGVja2JveC5jaGFuZ2UgLT5cbiAgICAgIHBhbmVsX2lkID0gXCIjI3skY2hlY2tib3guYXR0cignaWQnKX1fcGFuZWxcIlxuICAgICAgJHBhbmVsICAgPSAkKHBhbmVsX2lkKVxuICAgICAgXG4gICAgICBpZiAkY2hlY2tib3guaXMoJzpjaGVja2VkJylcbiAgICAgICAgJHBhbmVsLnNob3coKVxuICAgICAgZWxzZVxuICAgICAgICAkcGFuZWwuaGlkZSgpIl19
//# sourceURL=coffeescript