OOD DropDown

by Elijah Tate

HTML

<div class="main">

</div>

CSS

.button {
    background: #4679BD;
    color: white;
    padding: 7px 15px;
}
.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;
}

JavaScript

function DropDown(buttonId, dropDownId, text) {
    this.buttonId = buttonId;
    this.dropDownId = dropDownId;
    this.text = text;
    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>');
}

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

DropDown.prototype.buildDropDown = function buildDropDown(){
    this.container = $('<div id="'+ this.dropDownId + '_container" class="container"></div>');
    this.container.append(this.button).append(this.dropDown);
    $(".main").append(this.container);
    this.attachHandlers();
}

var DropDown0 = new DropDown("b0", "dd0", "Features");
var DropDown1 = new DropDown("b1", "dd1", "Type");
var DropDown2 = new DropDown("b2", "dd2", "Color");
DropDown0.buildDropDown();
DropDown1.buildDropDown();
DropDown2.buildDropDown();