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:

  <div class="shwhd">
    <label for="keyword-more">key</label> 
    <input type="checkbox" name="one" checked title="click for more" id="keyword-more">
    <div class="hd">
      <pre> ... or whatever tags you want here ...
      </pre> ... or whatever tags you want here ...
    </div>
  </div>



.....................
-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 --