How to create an accordion / collapsible items in HTML

The code below is the simplest way I've found to create HTML where you can click on a header to expand or contract the item below. Such HTML is often called an accordion, or collapsible items.

The item (below an h4 header) gets an onclick attribute that calls a function, passed the id of a div. The div is given that same id, plus a style attribute setting the div initially to invisible (display:none). The function just toggles between visible and invisible. A style entry adds a finger pointer if someone mouses over a clickable item; that entry is optional, but I find it useful. The below code is in this sample file.

<style>
[onclick] {
    cursor: pointer;
}
</style>
<script>
   function toggleView(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
   }
</script>

<h4 onclick="toggleView('Q_Login')">How do I login?</h4>
<div id="Q_Login" style="display:none">
  <p>Very helpful answer goes here</p>
</div>

<h4 onclick="toggleView('Q_DoubleCharge')">What should I do if you charged my credit card twice?</h4>
<div id="Q_DoubleCharge" style="display:none">
  <p>Another very helpful answer goes here</p>
</div>