JQuery HTML5 Data

by David Kyle

HTML

<div id="main">
    <div class="section" data-section-type="Primary">Primary</div>
    <div class="section" data-section-type="Secondary">Secondary</div>
    <div class="section" data-section-type="Tertiary">Tertiary</div>
    <div class="section" data-section-type="Auxillary">Auxillary</div>
</div>
<br /><b>Output:</b>&nbsp;
<div class="output"></div>

CSS

#main {
    display: block;
    margin: 30px auto;
}
.section {
    display: table-cell;
    width: 120px;
    text-align: center;
    border-radius: 4px;
    border: outset 1px #232323;
    margin: 1px 2px;
    border-collapse: collapse;
    padding: 0px 1px;
    cursor: pointer;
}
.section:HOVER {
    background-color: rgba(200, 200, 220, .7);
    font-weight: bold;
}
.output {
    display: inline-block;
}

JavaScript

$(function () {
    $(document).on("click", ".section", function (e) {
        $(".output").text($(e.currentTarget).data().sectionType);
    });
});