title: input[type=checkbox]:checked content toggle not working in safari
body: <p>not sure if I should be asking this here or in WebMasters...
  I have an HTML block used within a Jive-N instance and in the block I have a number of DIVs with content that is hidden until the heading is clicked.  Much like an accordian or collapsible.
  You can see it in action on <a href="http://codepen.io/whitenoise83/pen/XjbvzZ" rel="nofollow">this codepen.</a></p>
  
  <p>It uses the input[type=checkbox]:checked CSS element to toggle the display of content and is working fine on every browser except Safari... I've only just been made aware of this and how it is actually a big issue for one of our firms that run Macs and use Safari as their primary browser.</p>
  
  <p>Does anyone know how to fix or adapt so it works with Safari as well as the others it already works in (IE/Edge, FireFox, Chrome and Opera).
  I've tried using</p>
  
  <pre><code>.ln-toggle-box + label ~ div {
    display: none;
    margin-bottom: 10px;
  }
  
  .ln-toggle-box:checked + label ~ div {
    display: block;
    margin-left:40px;
  }
  </code></pre>
  
  <p>instead of </p>
  
  <pre><code>.ln-toggle-box + label + div {
    display: none;
    margin-bottom: 10px;
  }
  
  .ln-toggle-box:checked + label + div {
    display: block;
    margin-left:40px;
  }
  </code></pre>
  
  <p>but it makes things break across all browsers.</p>
  
  <p>I'm not against using an entirely different method, but it HAS to be HTML+CSS based and cannot use JS or jquery as Jive strips that out.</p>
  
  <p>Thanks</p>