Sammy.js - simple page swap

Sammy.js - simple page swap

by bizamajig

HTML

<script src="https://raw.github.com/quirkey/sammy/master/lib/sammy.js"></script>
<a href="#test1">Yes</a>
<a href="#test2">No</a>
<div class="response">
    <div id="test1" class="hidden">I thought you'd see it my way.</div>
    <div id="test2" class="hidden">Ok. Maybe next time.</div>
</div>

CSS

body{
    background-color:#2b2b29;
    font-family:"Helvetica", Arial, sans;
    font-size: 18px;
}
a{
    padding:2px 7px;
    background-color:#7bcaf7;
    text-decoration:none; 
    color:#323232;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
a:hover{
    background-color:#94d3f7;   
}
.hidden{
    color:#FFF;
    position:absolute;
    float:left;
    margin-top:20px;
    display:none;
}

JavaScript

//initialize "SAMMY"
var app = $.sammy(function() {

    this.get('#test1', function(context) {
        if($('#test2').css('opacity') > 0){
            $('#test2').fadeOut();
        }
        $('#test1').fadeIn();
    });

    this.get('#test2', function(context) {
        if($('#test1').css('opacity') > 0){
            $('#test1').fadeOut();
        }
        $('#test2').fadeIn();
    });
})
.run('#!');//run it with default html fragment