CSS Toggle Visibility

by Kyle Mitofsky

HTML

<div class="panel">
  <input type='checkbox' id='css-toggle-switch' 
          checked='checked' class='css-toggle-switch'>
  <label for='css-toggle-switch' class='btn'>
    Error Details
  </label>
  <div class='css-toggle-content'>
     <pre><code>Unexpected StackOverflow</code></pre>
  </div >
</div>














<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
  About this Question on SO:
  <a href='https://stackoverflow.com/a/48431586/1366033'>
    Toggle divs without using Javascript
  </a>
</div>

CSS

.css-toggle-switch { display: none; }
.css-toggle-switch         + label:before { content: "Hide "; }
.css-toggle-switch:checked + label:before { content: "Show "; }
.css-toggle-switch:checked ~ .css-toggle-content  { display: none; }

.css-toggle-switch + label {
   cursor: pointer;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}



/* just some styles to make the demo a little more pleasant */
.btn {
  padding: 5px 10px;
  background: white;
  border: 1px solid grey;
  border-radius: 3px;
  width: 130px;
  display: inline-block;
  text-align: center;
}
.btn:hover {
  background: #e6e6e6;
  -webkit-box-shadow: inset 0 -1px 0 #dddddd;
     -moz-box-shadow: inset 0 -1px 0 #dddddd;
          box-shadow: inset 0 -1px 0 #dddddd;
}
.panel {
    padding: 15px;
    background: #ffe06d;
    border: 1px solid #d69e01;
    border-radius: 3px;
}
pre {
  padding: 5px;
  margin-bottom: 0;
  background: #eaeaea;
  border: 1px solid grey;
    
}