focus on click

by Steven Martin

HTML

<div id="mainBody">
    <div class="obj1 wrap unfocused">
        <div class="obj1 kid"></div>
    </div>
    <div class="obj2 wrap unfocused">
        <div class="obj1 kid"></div>
    </div>
    <div class="obj3 wrap" id="focused">
        <div class="obj1 kid"></div>
    </div>
</div>

CSS

.wrap {
    height: 50px;
    width: 50px;
    margin: 10px;
}
.obj1 {
    background: red;
}
.obj2 {
    background: green;
}
.obj3 {
    background: blue;
}
.kid {
    height: 20px;
    width: 20px;
    position: relative;
    margin: 0 auto;
    top: 15px;
    background: white;
}
.unfocused, .unfocused .kid {
    background: gray;
    border: 2px solid gray;
}
#focused, #focused .kid {
    border: 2px solid black;
}

JavaScript

var $allWraps = $("#mainBody .wrap");

$allWraps.each(function () {
    $(this).on("click", ".kid ", function () {
        setFocus($(this));
    });
});

function setFocus(f) {
    $allWraps.each(function () {
        $(this).each(function () {
            $(this).removeAttr(" id ");
            $(this).addClass(" unfocused ");
        });

        f.attr(" id ", " focused ");
        f.removeClass(" unfocused ");
    });
}