tzkmx
8/15/2015 - 5:22 PM

Sections with checkbox hack + yellow fade animation https://jsfiddle.net/0eaLm968

Sections with checkbox hack + yellow fade animation https://jsfiddle.net/0eaLm968

0. page.html
content_copyfile_download
<body>
    <div class="radio_panels">
    <h1>Demo of checkbox hack for panelized sections</h1>
        <input type="radio" name="selecta" id="section1_chkbox" />
        <label for="section1_chkbox">My first section</label>
        <input type="radio" name="selecta" id="section2_chkbox" />
        <label for="section2_chkbox">My second section</label>
        <div id="section1" class="panel">
            <h2>My first section</h2>
            <p>The content for my awesome panel 1</p>
        </div>
        <div id="section2" class="panel">
            <h2>My second section</h2>
            <p>The content of panel 2</p>
        </div>
    </div>
</body>
1. page.css
content_copyfile_download
.radio_panels [type="radio"] {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip: rect(1px 1px 1px 1px);
}
.radio_panels [type="radio"]:checked + label {
  background-color: black;
  color: white;
}
.radio_panels .panel {
  display: none;
  -webkit-animation:yellow-fade 3s;
  -moz-animation:yellow-fade 3s;
  animation:yellow-fade 3s;
}
.radio_panels #section1_chkbox:checked ~ #section1,
.radio_panels #section2_chkbox:checked ~ #section2 {
  display: block;
}
@-webkit-keyframes yellow-fade{
    5%{ background-color:#ff8; }
}

@-moz-keyframes yellow-fade{
    5%{ background-color:#ff8; }
}

@keyframes yellow-fade{
    5%{ background-color:#ff8; }
}
2. hashchange.js
content_copyfile_download
/* this makes your checkbox sections bookmarkable */
(function($) {
  function changeToHashedSection(hash) {
    $(hash + '_chkbox').click();
    document.getElementById('page').scrollTop = 0;
    console.log('Moved to section: ' + hash + ' on ' + document.location.pathname);
  };
  $(function($) {
    var hash = document.location.hash;
    if (0 === hash.lastIndexOf('#')) {
        changeToHashedSection(hash);
    }
  });
  $(window).on( 'hashchange', function(e){
      changeToHashedSection(document.location.hash);
  });
  $("[name='selecta']").change(function(e) {
      var hash = '#' + e.target.id.replace('_chkbox', '');
      if(hash !== document.location.hash) {
        if(history.pushState) {
            history.pushState(null, null, hash);
        } else {
           location.hash = hash;
        }
      }
  });
})(jQuery);