HTML5 Interactive Elements
HTML
<details open>
<summary>HTML5 Interactive Elements</summary>
<menu>
<command id=checkbox type=checkbox label="Command Type Checkbox" />
<command id=checkbox type=checkbox label="Command Type Checkbox" />
</menu>
</details>
<img id="map_img" src="http://placekitten.com/200/300" style="visibility:hidden" width="400" height="400"/>
CSS
details {
border:2px inset black;
border-radius:5px;
padding-left:1em;
padding-right:1em;
}
summary {
background:lightgrey;
border-bottom:1px solid black;
margin-left:-1em;
margin-right:-1em;
}
command {
display:block;
}
command::before {
padding-left:0.5em;
padding-right:0.5em;
content:attr(label);
-webkit-appearance:button;
display:inline;
}
command[type=checkbox]::before, command[type=radio]::before {
-webkit-appearance:none;
content:none;
}
command[type=checkbox]::after, command[type=radio]::after {
content:attr(label);
white-space:nowrap;
padding-left:1em;
}
command[type=checkbox] {
-webkit-appearance:checkbox;
}
command[type=radio] {
-webkit-appearance:radio;
}
JavaScript
document.createElement('command');
$(function() {
$('menu').click(function() {
x.style.visibilty = "visible";
});
});