SO - 22692712

by Arun P Johny

HTML

<h2>Filter By Price</h2>
<ol id="myAnchor">                        
    <li><a data-range="0-20" href="#" >0.00 - 20.00</a></li>
    <li><a data-range="20-50" href="#">20.00 - 50.00</a></li>
    <li><a data-range="50-80" href="#" >50.00 - 80.00</a></li>
    <li><a data-range="80-100" href="#">80.00 - 100.00</a></li>
    <li><a data-range="All" href="#">All</a></li>
</ol>   
<ul class="box-content">
    <li data-range="0-20">13$</li>
    <li data-range="20-50">23$</li>
    <li data-range="50-80">60$</li>
</ul>

JavaScript

(function ($) {
    var $contents = $('.box-content > li');
    $("#myAnchor li").click(function (e) {
        var range = $(this).find('a').data('range');
        if (range == 'All') {
            $contents.show();
        } else {
            $contents.hide().filter('[data-range="' + range + '"]').show()
        }
    }); //click anchor
})(jQuery); //ready