Module Pattern Drop Downs

by Elijah Tate

HTML

<div class="main"></div>

CSS

.button {
    background: #4679BD;
    color: white;
    padding: 7px 20px;
    width: 100px;
}
.button:hover {
    cursor: pointer;
    background: #325475;
}
.dropDown {
    display: none;
}
.main {
    width: 100%;
}
.container {
    float:left;
    margin-right: 15px;
}
.dropDown {
    border: 1px solid #325475;
    padding: 5px 0 5px 20px;
}

JavaScript

var DropDown = (function () {
    return {
        buttonId: "",
        dropDownId: "",
        text: "",
        button: "",
        dropDown: "",

        buildDropDown: function buildDropDown(buttonText) {
            this.dropDownId = buttonText + "_dropDown";
            this.buttonId = buttonText + "_button";
            this.text = buttonText;
            this.button = $('<div id="' + this.buttonId + '" class="button">' 					+ this.text + '</div>');
            this.dropDown = $('<div id="' + this.dropDownId + '" class="dropDown"><div>One</div><div>Two</div><div>Three</div></div>');
            this.container = $('<div id="' + this.dropDownId + '_container" class="container"></div>');
            this.container.append(this.button).append(this.dropDown);
            $(".main").append(this.container);
            this.attachHandlers();
        },

        attachHandlers : function attachHandlers() {
            var self = this;
            $(this.button).on("click", function () {
                $(self.dropDown).toggle();
            });
        },

        speak: function () {
            alert(this.button);
        }
    }
});

var featuresDropDown = DropDown();
featuresDropDown.buildDropDown("Features");
var typeDropDown = DropDown();
typeDropDown.buildDropDown("Type");