select deselct

by Robert Dodd

HTML

<div>
    <div>Map (Try clicking a postcode below!)</div>
    <div class="postcode deselected" data-info="4000">4000</div>
    <div class="postcode deselected" data-info="5000">5000</div>
    <div class="postcode deselected" data-info="6000">6000</div>
</div>
<br>
<div>Information - Set extra information for the current postcode</div>
<div id="information" style="width: 100px; height: 50px; border: 1px solid black;"></div>
    <br>
<div>
    A postcode can be selected(green) or deselected(gray)<br>
    Clicking a postcode makes it active (red outline) and gives you a chance to edit some specific information for it
</div>

CSS

.deselected {
    background: lightgrey;
    border: 1px solid grey;
}
.selected {
    background: lightgreen;
}
.postcode {
    width: 50px;
    height: 50px;
}
.active {
    border: 2px solid red;
}

JavaScript

$(function () {
    $('.postcode').click(function () {
        if ($(this).hasClass('selected')) {
            if ($(this).hasClass('active')) {
                $(this).removeClass('selected');
            }
        } else {
            $(this).addClass('selected');
        }
        $('.active').removeClass('active');
        $(this).addClass('active');
        if ($(this).hasClass('selected')) {
            $('#information').text($(this).data('info'));
        } else {
            $('#information').text('no area selected');
        }
    });
});