howto - all websites: code - show-hide rev 26 may 2019
Canonical name in comments: 'show-hide'
(so far throughout the css files and project files i have
show/hide, show-hide, showhide, ...)
.......................................................
the code for css show-hide
.....................
the html:
.....................
-core.css:
from https://codepen.io/paulobrien/pen/tpmAi
(class/id names are shorted so as to not conflict with javascript show/hide.)
*/
/* { these three blocks make it happen: */
div.shwhd input { /* this makes the checkbox be "checkable", but not visible -- it's off the screen! */
position: absolute;
left: -999em
}
div.hd {
color: #090909; /* dark grey */
max-height: 99em;
opacity: 1;
height: auto;
overflow: hidden;
margin-left: 1em;
border-left: 1px solid #ccc;
padding: 1em 3em 1em 1em;
}
/* this makes the showing and hiding:
the checkbox starts out "checked", so height and opacity of contents is 0.
When we click on the non-visible checkbox, it is no longer "checked",
and the div.hd gets its defined height and opacity (above).
*/
input[type=checkbox]:checked + div.hd {
opacity: 0;
max-height: 0;
border: none;
}
/* } make it happen. */
/* { some basic formatting to make it look nice -
do any website-specific styles in the website-main.css. */
div.shwhd {
}
div.shwhd label {
cursor: pointer;
border: none;
margin: 0;
}
div.shwhd label:after {
content: ' \25bc'; /* "downward-pointing black triangle */
white-space: nowrap;
}
div.hd pre {
margin-left: 6em;
padding-left: 1em;
}
/* } some basic formatting to make it look nice */
.....................
-main.css - sample additional styling:
/* { here's some formatting to make it look nice: */
div.shwhd {
}
body#history div.shwhd {
display: inline;
}
div.shwhd label {
color: green;
cursor: pointer;
border: none;
margin: 0;
padding: 4px 6px;
border-radius: 6px;
box-shadow: 2px 2px 4px #ccc;
}
body#history div.shwhd label {
font-size: 80%;
border-bottom: 1px solid #ccc;
padding: 0 0 2px 0;
margin-left: 6px;
box-shadow: none;
}
div.shwhd label:after {
content: ' \25bc'; /* "downward-pointing black triangle */
white-space: nowrap;
}
body#history div.shwhd label:after {
content: '\21a1'; /* down arrow */
}
/* } formatting to look nice. */
/* ( showhide content formatting */
div.hd pre {
margin-left: 60px;
border-left: 1px solid green;
padding-left: 10px;
}
div.notes {
font-size: .95em;
line-height: 1.5;
clear: both;
}
div.notes p {
margin: 8px 0 0 0;
line-height: 1.5;
}
/* } showhide content formatting */
_______________________________________________________
begin 26 may 2019
-- 0 --