Toggle divs without using Javascript

I'd like to toggle a <div>, but my requirement is that it must work with javascript turned off. I would like to select a hyperlink that states "modify search" and the div that contains the search criteria displays.

I've found a TON of demos using jQuery, but they all require javascript enabled. Any assistance is appreciated.

For a little more polished version of the accepted answer, a common practice is to combine a hidden checkbox + label to be able to have a clickable label on screen that maps to a hidden backing value that is available to both JavaScript (.checked) and to CSS (:checked)

<!-- language: lang-html -->

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

By putting our checkbox first, we can drive CSS decisions based on the :checked selector. We can grab subsequent elements with the adjacent sibling select + or the general sibling selector ~

<!-- language: lang-css -->

 /* always hide the checkbox */
.css-toggle-switch { display: none; }

/* update label text to reflect state */
.css-toggle-switch         + label:before { content: "Hide "; }
.css-toggle-switch:checked + label:before { content: "Show "; }

 /* conditionally hide content when checked */
.css-toggle-switch:checked ~ .css-toggle-content  { display: none; }

/* make the label look clickable */
.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;
}

Working Demo in jsFiddle & StackSnippets

<!-- begin snippet: js hide: true console: true babel: false --> <!-- language: lang-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;
    
}

<!-- language: lang-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>

<!-- end snippet -->