SEO Footer Popups

by ritcheyer

HTML

<div id="SEOFooterSearch" class="section searchFooter" evtTag="wigt:SEOFooterSearch">
<div id="linkingModule">
    <div class="footcol">
        <h5>Search Featured States</h5>
        <ul>
            <li><a href="http://www.realtor.com/realestateandhomes-search/Alabama/">Alabama Real Estate</a></li>
            <li><a href="http://www.realtor.com/realestateandhomes-search/Alaska/">Alaska Real Estate</a></li>
            <li><a href="http://www.realtor.com/realestateandhomes-search/Arizona/">Arizona Real Estate</a></li>
            <li class="last-child">
                <i>View More Featured States</i>
                <div class="popup footPop">
                    <ul>
                        <li><a href="http://www.realtor.com/realestateandhomes-search/Arkansas/">Arkansas Real Estate</a></li>
                        <li><a href="http://www.realtor.com/realestateandhomes-search/California">California Real Estate</a></li>
                        <li><a href="http://www.realtor.com/realestateandhomes-search/Colorado/">Colorado Real Estate</a></li>
                        <li><a href="http://www.realtor.com/realestateandhomes-search/Connecticut/">Connecticut Real Estate</a></li>
                        <li><a href="http://www.realtor.com/realestateandhomes-search/Delaware/">Delaware Real Estate</a></li>
                        <li><a href="http://www.realtor.com/realestateandhomes-search/District-Of-Columbia/">District of Columbia Real Estate</a></li>
                        <li><a href="http://www.realtor.com/realestateandhomes-search/Florida/">Florida Real Estate</a></li>
                        <li><a href="http://www.realtor.com/realestateandhomes-search/Georgia/">Georgia Real Estate</a></li>
                        <li><a href="http://www.realtor.com/realestateandhomes-search/Hawaii/">Hawaii Real Estate</a></li>
                        <li><a href="http://www.realtor.com/realestateandhomes-search/Idaho/">Idaho Real Estate</a></li>
                       ...

CSS

#linkingModule .last-child {
        position: relative;
    }
    #linkingModule .footcol {
        width: 18%;
        padding: 1%;
        float: left;
    }
    #linkingModule .footcol h5 {
        font-weight: normal;
        font-size: 100%;
    }
    #linkingModule .footPop {
        padding: 15px;
        display: none;
        width: 200px;
        font-size: 100%;
    }
    #linkingModule .footPop ul {
        max-height: 200px;
        width: 180px;
        overflow-y: scroll;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 10px;
    }
    #linkingModule .footPop ul.actionBase {
        max-height: auto;
        width: auto;
        overflow: inherit;
        background-color: transparent;
        border: 0;
        padding: 0;
    }

    #linkingModule .lastPop {
        left: inherit;
        right: 20px;
    }
    #linkingModule .last-child li {
        width: 170px;
    }
    #linkingModule .footPop .actionBase li {
        width: auto;
    }
    #linkingModule .last-child i {
        color: #0369b2;
        font-style: normal;
        cursor: pointer;
        height: 20px;
        display: block;
    }
    #linkingModule .last-child i:hover {
        text-decoration: underline;
    }
    
    /* overrides */
    .searchFooter {
        float: left;
        width: 98%;
        overflow: visible;
        margin-bottom: 10px;
    }
    #pageBottom .section {
        margin: 10px;
    }

JavaScript

$(document).ready(function() {
        // add class to the last popup so we can target it appropriately w/CSS
        $('#linkingModule div:last-child .footPop').addClass('lastPop');
        
        $('#linkingModule .last-child i').click(function(){

            // hide all previously opened pop ups
            $('.popup.footPop').fadeOut('fast');

            // show currently clicked popup
            $(this).next('.popup.footPop').fadeIn('fast');
        });
        
        // if close button clicked, close this popup. does this 
        // functionality exist already somewhere else that we can use?
        $('.footPop a.close').click(function(){
            $(this).closest('.popup').hide();
            
            return false;
        });
    });