Revealing Module Pattern DropDown

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 () {
    var buttonId = "",
        dropDownId = "",
        buttonText = "",
        button = "",
        dropDown = "";
        
    	function buildDropDown(buttonText) {
            buttonText = buttonText;
            dropDownId = buttonText + "_dropDown";
            buttonId = buttonText + "_button";
            
            button = $('<div id="' + buttonId + '" class="button">' + buttonText + '</div>');
            dropDown = $('<div id="' + dropDownId + '" class="dropDown"><div>One</div><div>Two</div><div>Three</div></div>');
            var container = $('<div id="' + dropDownId + '_container" class="container"></div>');
            container.append(button).append(dropDown);
            $(".main").append(container);
            attachHandlers();
        }

        function attachHandlers() {
            $(button).on("click", function () {
                $(dropDown).toggle();
            });
        }

        var speak = function () {
            alert("Hello");
        }
    
    return {
        buildDropDown: buildDropDown
    }
});

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