Associate products and available options

by Csaba Hellinger

HTML

<div id="products">
    <div class="product" data-opts="o0,o1,o3">Product 0</div>
    <div class="product" data-opts="o2,o3">Product 1</div>
    <div class="product" data-opts="o0,o2">Product 2</div>
</div>

<br>

<div id="options">
    <div id="o0" class="option">Option 0</div>
    <div id="o1" class="option">Option 1</div>
    <div id="o2" class="option">Option 2</div>
    <div id="o3" class="option">Option 3</div>    
</div>

CSS

.product, .option {
    border: 1px solid black;
    padding: 5px;
}

JavaScript

$(".product").click(function productClick() {
    var opts = $(this).attr("data-opts").split(",");
    $(".option").each(function optionEach(index) {
        $(this).toggle(opts.indexOf(this.id) > -1);
    });
});