Agenda - Magic Lines

by Susan Delgado

HTML

<link rel="stylesheet" href="http://crf.org/templates/crf/css/inner_meetings_tct.css">
<link rel="stylesheet" href="http://crf.org/templates/crf/css/inner.css">
<div class="filter-nav-wrap">
    <ul class="filter-nav" id="filter-nav">
        <li class="active sat"><a class="box" data-filtertarget="Saturday" href="#">Saturday</a>

        </li>
        <li class="sun"><a class="box" data-filtertarget="Sunday" href="#">Sunday</a>

        </li>
        <li class="mon"><a class="box" data-filtertarget="Monday" href="#">Monday</a>

        </li>
        <li class="tues"><a class="box" data-filtertarget="Tuesday" href="#">Tuesday</a>

        </li>
        <li class="web"><a class="box" data-filtertarget="Webnesday" href="#">Webnesday</a>

        </li>
    <!--     <li class="thur"><a class="box" data-filtertarget="Thurdsay" href="#">Thursday</a>
        
        </li>
        <li class="fri"><a class="box" data-filtertarget="Friday" href="#">Friday</a> -->

        </li>
    </ul>
</div>
<div class="gallery">
    <div data-categories="Saturday" class="active">Hello Sat Agenda</div>
    <div data-categories="Sunday" class="inactive">Hello Sunday Agenda</div>
    <div data-categories="Monday" class="inactive">Hello Monday Agenda</div>
    <div data-categories="Tuesday" class="inactive">Hello Tues Agenda</div>
    <div data-categories="Webnesday" class="inactive">Hello web Agenda</div>
   <!--  <div data-categories="Thurdsay" class="inactive">Hello thurs Agenda</div>
    <div data-categories="Friday" class="inactive">Hello Friday Agenda</div> -->
</div>

SCSS

.filter-nav-wrap { 
		margin: 50px auto;  
    #filter-nav{ 
		margin: 0 auto; 
		list-style: none; 
		position: relative; 
		width: 100%; 
        li { 
            width:172px;
            height:115px;
            display: inline-block;
            text-align:right;
            vertical-align:bottom;
            background-color: #eee;
            
            
              &.sat{
                    background-color:#253746;
                }
            &.sun{
                    background-color:#a0291a;
                }
            &.mon{
                    background-color:#586977;
                }
            &.tues{
                    background-color:#34657f;
                }
            &.web{
                    background-color:#999999;
                }
          /*   &.thur{
                    background-color:#253746;
                }
            &.fri{
                    background-color:#253746;
                } */
            &#magic-line {  
                background-color: blue; 
            }
              
            a { 
                color:#fff;
                font-size: 14px; 
                display: block; 
                float: left; 
                padding: 6px 10px 4px 10px; 
                text-decoration: none; 
                text-transform: uppercase; 
            }
        }
	}
}
.inactive{
    display:none;
}
#magic-line { 
    position: absolute; 
    bottom: -10px; 
    left: 0; 
    width: 100px; 
    height: 5px !important; 
    background-color: blue; 
}

JavaScript

$(function () {
    var el, leftPos, newWidth,
    mainNav = $("#filter-nav");

    $(mainNav).append("<li id='magic-line'></li>");
    var magicLine = $("#magic-line");

    $(magicLine)
        .width($(".active").width())
        .css("left", $(".active a").position().left)
        .data("origLeft", $(magicLine).position().left)
        .data("origWidth", $(magicLine).width());

    $(".gallery div").slideUp().filter("div[data-categories=Saturday]").addClass('active').slideDown();

    $(".filter-nav li").find("a").on("click", function () {

        $(".filter-nav li").removeClass('active');
        $(this).parent().addClass('active');
        var $target = $(this).data("filtertarget");

        el = $(this), curPos = $('#magic-line').position().left, leftPos = $(this).position().left, newWidth = $(this).parent().width;

        $(magicLine).animate({
            left: leftPos,
            width: newWidth
        })

        $(".gallery div").removeClass('active').slideUp().addClass("inactive")
            .filter("div[data-categories=" + $target + "]").removeClass("inactive").addClass('active').slideDown();
    });
});