JSFiddle - React, Tailwind, and code Playground

jQuery Sorting Layout

by Jennifer Perrin

HTML

<ul class="filter">
    <li data-type="home" class="active">Home</li>
    <li data-type="about">About</li>
    <li data-type="skills">Skills</li>
    <li data-type="resume">Resume</li>
    <li data-type="blog">Blog</li>
    <li data-type="contact">Contact</li>
</ul>

<div class="objects">
    <div data-type="home" class="page">
        <p>Home</p>
    </div>
    <div data-type="about" class="page">
        <p>About</p>    
    </div>
    <div data-type="skills" class="page">
        <p>Skills</p>
    </div>
    <div data-type="resume" class="page">
        <p>Resume</p>
    </div>
    <div data-type="blog" class="page">
        <p>Blog</p>
    </div>
    <div data-type="contact" class="page">
        <p>Contact</p>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Cuprum);

body {
    padding: 30px; 
    font-family: "Cuprum"; 
    background:#333 url(http://jenniferperrin.com/image/background.gif);
}

/* --- Menu Styles --- */
.filter {
  padding: 0;
  float: left;
  width: 100%;
  margin-bottom: 50px;
}

.filter li {
  margin-right: 10px;  
  float: left;
  font-size: 14px;
  list-style: none;
  background: rgba(0,0,0,.4);
  padding: 8px 20px;
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 1px 3px #000;
  -webkit-transition: background .25s ease;
}

.filter .active, .filter .active:hover {
  background-color: #789b2e !important;
}

.filter li:hover {
  background: #111;
}

/* --- Page Styles --- */
.page {
  float: left;
  margin: 0 20px 20px 0;
  padding: 0;
  width: 500px;
  height: 500px;
  transition: all .25s ease;
}

div[data-type=home] { }
    div[data-type=home] p { color: red; }

div[data-type=about] { }
    div[data-type=about] p { color: blue; }

div[data-type=skills] { }

div[data-type=resume] { }

div[data-type=blog] { }

div[data-type=contact] { }

JavaScript

jQuery(function($) {
    $('.objects div').hide();
    $('div[data-type="home"]').show();
    
    $(".filter li").click(function() {
        var pageType = $(this).attr("data-type");
        $('.objects div').hide();
        (!pageType) ? $('.objects div').hide().fadeIn(1500) : $('div[data-type="' + pageType + '"]').fadeIn(1500);
        $('.active').removeClass('active');
        $(this).addClass('active');
    });
});