Stackoverflow 2012-04-14

by bluey

HTML

<div class="messagepop" id="pop1">ANYTHING HERE 1</div>
<br /><br /><br /><br /><br /><br />
<div class="messagepop" id="pop2">ANYTHING HERE 2</div>
<br /><br /><br /><br /><br /><br />
<a href="#pop1" class="contact">Contact Us 1</a><br />
<a href="#pop2" class="contact">Contact Us 2</a><br />

CSS

a.selected {
    background-color:#1F75CC;
    color:white;
    z-index:100;
}
.messagepop {
    background-color:#FFFFFF;
    border:1px solid #999999;
    cursor:default;
    display:none;
    margin-top: 15px;
    position:absolute;
    text-align:left;
    width:394px;
    z-index:50;
    padding: 25px 25px 20px;
}
label {
    display: block;
    margin-bottom: 3px;
    padding-left: 15px;
    text-indent: -15px;
}
.messagepop p, .messagepop.div {
    border-bottom: 1px solid #EFEFEF;
    margin: 8px 0;
    padding-bottom: 8px;
}

JavaScript

.fn.slideFadeToggle = function (easing, callback) {
    return this.animate({
        opacity: 'toggle',
        height: 'toggle'
    }, "fast", easing, callback);
};

$(function () {
    function select($link) {
        $link.addClass('selected');
        $($link.attr('href')).slideFadeToggle(function () {});
    }

    function deselect($link) {
        $($link.attr('href')).slideFadeToggle(function () {
            $link.removeClass('selected');
        });
    }

    $('.contact').click(function () {
        var $link = $(this);
        if ($link.hasClass('selected')) {
            deselect($link);
        } else {
            select($link);
        }
        return false;
    });

    $('.close').live('click', function () {
        deselect();
        return false;
    });
});$.fn.slideFadeToggle = function (easing, callback) {
    return this.animate({
        opacity: 'toggle',
        height: 'toggle'
    }, "fast", easing, callback);
};

$(function () {
    function select($link) {
        $link.addClass('selected');
        $($link.attr('href')).slideFadeToggle(function () {});
    }

    function deselect($link) {
        $($link.attr('href')).slideFadeToggle(function () {
            $link.removeClass('selected');
        });
    }

    $('.contact').click(function () {
        var $link = $(this);
        if ($link.hasClass('selected')) {
            deselect($link);
        } else {
            select($link);
        }
        return false;
    });

    $('.close').live('click', function () {
        deselect();
        return false;
    });
});