fadeTextWithSammy

fading text in and out using sammy.js to keep track of state

HTML

<script src="http://www.individual11.com/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>
    <span class="radioList">
                            <input class="input-validation-error radio-member" data-val="true" data-val-required="Please select yes or no." id="AarpMemberYes" name="AarpMember" type="radio" value="Y">
                            <span id="AarpMemberYesText">Yes</span>
                            <span class="padradio"></span>
                            <input class="input-validation-error radio-member" id="AarpMemberNo" name="AarpMember" type="radio" value="N">
                            <span id="AarpMemberNoText">No</span>
                            
                        </span>
</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();
    });
      this.get('#AarpMemberYes', function (context) {
                        alert("inside change");
                    });
})
.run('#!');//run it with default html fragment