When Click On List Item Hide Other Items

I have prices in a list and I want to when clicking the price,hide the other range of prices Demo Jsfiddle my list items has different class names one is item first or item last

Solution 1:

Just do this

$("#myAnchor li a").click(function(){
    $("#myAnchor li").not($(this).parent()).hide();
});

Refer LIVE DEMO

Updated:

To hide price list based on selecting the range

$("#myAnchor li a").click(function(){
    var prices = $(".box-content li");
    prices.show();
    if (this.id != "All")
        prices.not($(".box-content li[id='"+this.id+"']")).hide();
});

Refer LIVE DEMO 2

Solution 2:

Since ID of an element must be unique, use a data-* attribute like

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

then

(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

Demo: Fiddle

Solution 3:

@Arun has a good answer, but for the sake of variety, I'll add this.

First off, you need to make sure you do not have duplicate ids. Secondly, they should start with a letter and not a number. Change the ids of the list elements in your ul .box-content to classes that match the ids of the anchor links. Something like this:

<olid="myAnchor"><li><aid="zero-20"href="#" >0.00 - 20.00</a></li><li><aid="twenty-50"href="#">20.00 - 50.00</a></li><li><aid="fifty-80"href="#" >50.00 - 80.00</a></li><li><aid="eighty-100"href="#">80.00 - 100.00</a></li><li><aid="All"href="#">All</a></li></ol><ulclass="box-content"><liclass="zero-20">13$</li><liclass="twenty-50">23$</li><liclass="fifty-80">60$</li></ul>

Now, using jQuery's .siblings() selector you can do something like this to hide everything but the item you clicked on.

$(document).ready(function() {
    $('#myAnchor li a').click(function(){
        var change = $(this).attr('id');
        $('.box-content .'+change).show();
        $('.box-content .'+change).siblings().hide();
    });
});

Here is a fiddle of it in action: http://jsfiddle.net/5rWQN/

Solution 4:

With jQuery just do:

$(document).ready(function() {
    $("#myAnchor a").click(function() {
        $("#myAnchor li").hide(); // hide all "li" elements
        $(this).parent().show(); // show the clicked "li" element
    })
});

Here is a Live Demo: Fiddle