select deselct

by Robert Dodd

HTML

<div>
    <div>Map</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 - Select localities inside that postcode</div>
<div id="information" style="width: 100px; height: 50px; border: 1px solid black;"></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');
        }
    });
});