Logic for prioritising elements in the dom using JS
<p>I have made this fiddle: <a href="http://jsfiddle.net/GMH6q/2/" rel="nofollow">http://jsfiddle.net/GMH6q/2/</a></p>

<p>HTML:</p>

<pre><code>&lt;div class="feature" id="about"&gt;about&lt;/div&gt;
&lt;div class="feature" id="services"&gt;services&lt;/div&gt;
&lt;div class="feature" id="products"&gt;products&lt;/div&gt;

&lt;label&gt;About&lt;/label&gt;&lt;input type="checkbox" data-id="about" /&gt;
&lt;label&gt;Services&lt;/label&gt;&lt;input type="checkbox" data-id="services" /&gt;
&lt;label&gt;Products&lt;/label&gt;&lt;input type="checkbox" data-id="products" /&gt;
</code></pre>

<p>JavaScript:</p>

<pre><code>$(document).ready(function(){
    var priority = {'about':1, 'services':2, 'products':3};
    $('input[type="checkbox"]').change(function(){
        var el = $(this).attr('data-id');        
        if($(this).is(':checked')){                        
           $('.feature').hide();             
           $('.feature#' + el).show();
        } else {
           $('.feature#' + el).hide();    
        }
    });              
});
</code></pre>

<p>If <code>about</code> is on, then clicking any other checkbox won't have any effect.<br>
Likewise if <code>services</code> is on, putting <code>products</code> on won't have any effect, but putting <code>about</code> in, will just show <code>about</code>.<br>
If all are on, then <code>about</code> just shows.<br>
If all are off, nothing shows.</p>

<p>The priority array needs to be integrated in somehow, but I dont know how. If someone could help me with some logic and integrating the array, that would be great!</p>
