Programmable button and box solution

by alano

HTML

<div class="rsButtons"></div>
<div class="rsBoxes"></div>

CSS

body > div {
    position: relative;
}
body * div {
    text-align: center;
    border: 2px solid Black;
}
.rsButtons > div {
    height: 20px;
    width: 100px;
    margin: 20px 0px 20px 20px;
    cursor: pointer;
}
.rsBoxes > div {
    position: absolute;
}
.red { background-color: Red; }
.green { background-color: Green; }
.blue { background-color: Blue; }

JavaScript

$(document).ready(function(){
    //draw buttons and unselected boxes
    $buttons = $("div.rsButtons");
    $boxes = $("div.rsBoxes");
    $.each(rooms, function(i, room) {
        $("<div>", room.attr.button).appendTo($buttons);
        $("<div>", $.extend(room.attr.box, { css: room.animation.unselected })).appendTo($boxes);
    });
    //click handler
    $buttons.on("selectstart", "div", false);
    $buttons.on("click", "div", function(){
        var id = $(this).data("id");
        var room = rooms.filter(byID, id)[0];
        $("#" + room.attr.box.id, $boxes).animate((room.selected ^= true) ? room.animation.selected : room.animation.unselected);
    });
});

function byID(room) { return room.attr.button["data-id"] == this; }

//THIS IS YOUR "PROGRAMME". It is a JSON-like array of objects.
//There are 3 pairs of button/box in the array below, but you can add as many as you wish
//The "attr" sub-object is a list of html attributes for each button and box. You can add as many attributes as you wish, but note "class" must be within quotes, as must any attribute name containing a hyphen ("-").
//The "animation" sub-object is a list of animatable CSS properties. You can add as many properties as you like including, for example, "opacity" to fade things out, where 0 (zero) = invisible, and 1 (one) = fully visible


        var rooms = [{
            attr: {
                button: {
                    "data-id": "200",
                    text: "200",
                    "class": "red" },
                box: {
                    id: "box-200",
                    text: "This is the changing size container 200",
                    "class": "red" } },
            selected: false,
            animation: { 
                unselected: {
                    top: 0,
                    left: 0,
                    width: 150,
                    height: 150 },
                selected: {
                    top: 0,
                    left: 0,
                   ...