JSFiddle - React, Tailwind, and code Playground

by Daniel Redwood

HTML

<script src="http://github.com/cowboy/jquery-bbq/raw/v1.2.1/jquery.ba-bbq.min.js"></script>
<div class="main" role="main">
      <section class="work">
        <header>
          <h1><a class="navLink" href="#work" title="Work">WORK</a></h1>
        </header>
        <article id="work">
          <section>
            <h2>MUSIC VIDEOS</h2>
            <div class="thumbnail">
              <a id="misery" href="#" title="stuff and thing">
                <h3>Misery</h3>
              </a>
            </div>
          </section>
        </article>
      </section>
      <section class="bio">
        <header>
          <h1><a class="navLink" href="#bio" title="Bio">BIO</a></h1>
        </header>
        <article id="bio">
            <p>
                bio
            </p>
        </article>
      </section>
      <section class="contact">
        <header>
          <h1><a class="navLink" href="#contact" title="Contact">CONTACT</a></h1>
        </header>
        <article id="contact">
          <p>
            stuff
          </p>
        </article>
      </section>
    </div>

CSS

section {
    width:100%;
    font-size:.75em;        /* 12/16 */
    line-height:1.42em;     /* 170%  */
  }
    section header h1, section article section h2, .thumbnail h3 {
      margin:0;
      font-size:1em;
      font-weight:normal;
    }
    section article {
      display:none;
    }
      section article section {
        font-size:1em;
      }
        section article section h2 {
          margin:1em 0;
          text-align:center;
        }
          .thumbnail a {
            display: block;
            margin: 0 auto;
            text-align: center;
          }
          .thumbnail h3 {
          }
          .caption {
            display:none;
          }
      section article p {
        max-width:420px;
        text-align:justify;
      }

JavaScript

function navi(){
    var hash = window.location.hash,
        hspl = hash.split('=')[0],
        acti = $('.out')
        test = $.bbq.getState();

        console.log(test);

        if (!$('body').hasClass('work')){
            acti.removeClass('out').slideUp(400);
            
            $(hash).addClass('out').slideDown(400);        
        } else {
            if (hspl != '#work') {
                $('body').removeClass('work');

                acti.removeClass('out').slideUp(400);

                $(hash).addClass('out').slideDown(400);
            }
        }
}

/* Nav */

    $(window).bind('hashchange', function(){
        navi();
    });

/* Thumbnail Clicks */

    $('.thumbnail a').click(function(){
        $('body').addClass('work');

        var name = $(this).attr('id');

        $.bbq.pushState(name);                

        return false;
    });