Collapse without javascript

Question

I know how to collapse (display / hide) a div:

$('#nav').click(function() { $('#hello').toggleClass('hidden'); });

.hidden { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="nav">NAV</div>
<div id="hello" class="hidden">Hello</div>

Is it possible to do this without Javascript / jQuery?

I've tried the main answer from this question, but it is not working, as detailed here.

Answer 1

You may use :checked selector.

#hidden {
  display: none;
  height: 100px;
  background: red;
}
:checked + #hidden {
  display: block;
}

<input type="checkbox" id="my_checkbox" style="display:none;">
<div id="hidden"></div>

<label for="my_checkbox">Show/hide</label>

Example fiddle

Answer 2

Nobody has mentioned the 'details' element, which seems perfect for this job.

<details>
    <summary>Click to toggle</summary>
    <span>Oh, hello</span>
</details>