jQuery: event-driven, object-oriented accordion

by Manna

HTML

<div id="accordion-wrapper">

    <div class="accordion">
        <h3>Lorem ipsum dolor</h3>
        <div class="accordion-content">
            <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor.</p>
        </div>
    </div>

    <div class="accordion">
        <h3>Ibam forte sicut meus est</h3>
        <div class="accordion-content">
            <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor.</p>
        </div>
    </div>

    <div class="accordion">
        <h3>Trans longe is prope hortos</h3>
        <div class="accordion-content">
            <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Curabitur blandit tempus porttitor.</p>
        </div>
    </div>
            
        

</div>

CSS

#accordion-wrapper {
    margin: 2em auto;
    font: 80%/1.5 Arial, sans-serif;
    width: 70%;
}

.accordion {
    margin-bottom: 1.5em;
}

.accordion h3 {
    padding: 5px 8px;
    font-size: 1.3em;
    background: #222;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
}

.accordion-content {
    padding: 0.5em;
    background: #eee;
    border: 1px solid #ddd;
    margin-top: 0.5em;
    display: none;
}

JavaScript

var Accordion = {
    Elements: {
        titles: $('h3', 'div.accordion')
    },
    Events: {
        open: function(evt) {
            if (evt.data.element.is(':hidden')) {
                evt.data.element.slideDown(600);
            } else {

                this.close();

            }
        },
        close: function(evt) {

            if (evt.data.element.is(':visible')) {
                evt.data.element.slideUp(600);

            } else {

                this.open();

            }
        },
        bind: function() {

            Accordion.Elements.titles.each(function() {

                var $header = $(this);
                var $content = $header.next();

                $header.bind('open', {
                    element: $content
                }, Accordion.Events.open);
                $header.bind('close', {
                    element: $content
                }, Accordion.Events.close);

            });

        }
    },
    
    fn: {
        
        attachEvents: function() {
            
            Accordion.Events.bind();
 
            Accordion.Elements.titles.on('click', function() {
                
                $('div.accordion-content').slideUp(600);
                $(this).trigger('open');

            });                
            
            
        }
    },
    
    init: function() {
        
        Accordion.fn.attachEvents();
    }
};


Accordion.init();