Modal window with responsive accordion

by Admiral Potato

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>CATS!</title>
    </head>
    <body>
        <div id="holder">
        <div class="modal_holder">
        <div class="modal_top"></div>
        <div class="modal_tile">
            <div class="modal_content">
                <h1>blah</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas cursus fringilla. Aliquam varius arcu vel quam ultrices nec viverra quam pellentesque. Vivamus pretium, mi consequat sollicitudin vehicula, erat magna consequat libero, eget malesuada libero est interdum sem. Donec id velit nec odio tincidunt porttitor.</p>

                
                
                 <div id="profileAccordion">
                    <ul>
                        <li>
                            <div class="trigger active">Newsletters</div>
                            <div class="content" style="display: block;"><div class="content_wrap">

                                <h4>Master the Cloud</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

                                <h4>Fast Track to the Cloud</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

                                <h4>The Goal is Cyberconfidence</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

                                <h4>Cybersecurity</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

                                <h4>Mobility</h4>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,...

CSS

*{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
    text-align: inherit;
    text-decoration: inherit;
    color: inherit;
    background-color: transparent;
}
*:focus{
    outline: none;
}
html, body{
    height: 100%;
    width: 100%;
}

body{
    background-color: #eee;
    background-repeat: no-repeat;
    background-position: top center;
    vertical-align: top;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    font-style: normal;
    font-family: helvetica, arial, sans-serif;
    text-align: left;
    text-decoration: none;
    color: #ccc;
}
h1{
    padding: 12px 0;
    font-size: 32px;
    line-height: 32px;
    color: #fff;
}
h4{
    font-size: 13px;
    line-height: 16px;
    font-weight: bold;
}
p{
    text-align: justify;
    padding: 4px 0;
}

#holder{
    padding: 128px 64px;
    z-index: 1;
}

.modal_holder{
    width: 608px;
    margin: 0 auto;
}
.modal_holder.large{
    width: 712px;
}

.modal_top,.modal_bottom{
    height: 96px;
    background-repeat: no-repeat;
}
.modal_top{
    background-image: url('http://beta.csc.com/images/new/modal_bg_top.png');
}
.large .modal_top{
    background-image: url('http://beta.csc.com/images/new/modal_bg_top_large.png');
}
.modal_bottom{
    background-image: url('http://beta.csc.com/images/new/modal_bg_bottom.png');
}
.large .modal_bottom{
    background-image: url('http://beta.csc.com/images/new/modal_bg_bottom_large.png');
}
.modal_tile{
    padding: 8px 0; /* Negative margins on children cannot escape parent unless parent has padding */
    background-image: url('http://beta.csc.com/images/new/modal_bg_tile.png');
    background-repeat: repeat-y;
    position: relative;
    z-index: 3;
    *zoom: 1;
}
.large .modal_tile{
    background-image:...

JavaScript

var profileAccordionClickHandler = function(e){
    var $this = $(e.target), wasActive = false;
    //console.log(arguments);
    console.log($this.hasClass('active'));
    if($this.hasClass('active')){wasActive = true;}
    $('#profileAccordion .trigger').removeClass('active');
    $('#profileAccordion .content').slideUp();
    if(!wasActive){$this.addClass('active').siblings().slideDown();}
}
$('#profileAccordion .trigger').bind('click',profileAccordionClickHandler);


//Working around an IE7 protocol error by pasing content from:
// https://raw.github.com/scottjehl/Respond/master/respond.min.js

/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */
/*! NOTE: If you're already including a window.matchMedia polyfill via Modernizr or otherwise, you don't need this part */
window.matchMedia=window.matchMedia||(function(e,f){var c,a=e.documentElement,b=a.firstElementChild||a.firstChild,d=e.createElement("body"),g=e.createElement("div");g.id="mq-test-1";g.style.cssText="position:absolute;top:-100em";d.style.background="none";d.appendChild(g);return function(h){g.innerHTML='&shy;<style media="'+h+'"> #mq-test-1 { width: 42px; }</style>';a.insertBefore(d,b);c=g.offsetWidth==42;a.removeChild(d);return{matches:c,media:h}}})(document);

/*! Respond.js v1.1.0: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs  */
(function(e){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=e.matchMedia&&e.matchMedia("only all").matches;if(respond.mediaQueriesSupported){return}var w=e.document,s=w.documentElement,i=[],k=[],q=[],o={},h=30,f=w.getElementsByTagName("head")[0]||s,g=w.getElementsByTagName("base")[0],b=f.getElementsByTagName("link"),d=[],a=function(){var...