title: How do I achieve arrow key navigation between divs
body: <p>I have the following list of divs</p>
  
  <pre><code>&lt;div id="multi-picker"&gt;
    &lt;div id="opt1"&gt;
       &lt;input type="checkbox"&gt;  Option 1
    &lt;/div&gt;
    &lt;div id="opt2"&gt;
       &lt;input type="checkbox"&gt;  Option 2
    &lt;/div&gt;
    etc...
  &lt;/div&gt;
  </code></pre>
  
  <p>All working, but I'm not happy with the keyboard navigation. To navigate from opt1 to opt2 I need to press the tab key. Ideally I want to treat the options as a select and navigate with up/down arrow. Can this be done?</p>
  
  <p>Alternatively...
  Is there any way to have a multi-select with the options styled with checkboxes to reflect the selection state of each option?</p>