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',
        width: 'toggle'
    }, "fast", easing, callback);
};

$(function () {
    function select($link) {
        $('.contact').each(function(index, l) {
            var $pane = $($(l).attr('href'));
            if ($pane.is(':visible')) {
                $pane.slideFadeToggle();
            }
        });
        $('.contact').removeClass('selected');
        $link.addClass('selected');
        $($link.attr('href')).slideFadeToggle();
    }

    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;
    });
});