title: How do I capture the keyboard enter/spacebar keydown events for an accordion structure with div and span elements
body: <p>I'm trying to make the accordions on our site accessible by adding support for keyboard control. I need to have the enter key or the spacebar key trigger the opening/closing of the accordions. The accordions are made up of div and span elements. </p>
  
  <p>I've tried to adapt the current js code that works for a click with our accordions but can't get it to work.</p>
  
  <p>Here is an example of the HTML for one accordion element on ours site:</p>
  
  <p>`
  Weddings, Private Events, and Space Rental</p>
  
  Header for Weddings<p>Wedding Rental Content</p>
  
  
  <p>`</p>
  
  <p>Here is the js that works for click event:
        <code>$('.accordion .title').click(function() {
          $(this).parent().children('.content').toggle();
          $(this).toggleClass('open');
          if ($(this).hasClass('open')){
              $(this).parent().attr("aria-expanded","true");
          }else {
              $(this).parent().attr("aria-expanded","false");
          }
      });</code></p>
  
  <p>Below is what I tried to do to reproduce this for a keypress on the Enter key, this doesn't work. Nothing happens. </p>
  
  <pre><code>  `$('.accordion .title').keypress(function(e) {
      if (e.which == 13) {
        $('.accordion .title').click();
      }
    });`
  </code></pre>
  
  <p>When I change this code to point the jquery selector to one individual accordion node (with an id in the selector like $('#trigWeddings')), the code kind of works but opens all of the accordion nodes on the page which is obviously not what I want.</p>
  
  <p>I'm confused about what I'm actually doing here, am I adding an event listener, and if not do I need to do that? How can I trigger what already exists for the click event for the keypress of the Enter or Spacebar key?</p>