when click on list item hide other items

Question

I have prices in a list and I want to when clicking the price,hide the other range of prices

my list items has different class names one is item first or item last here is the html:

list to be clicked:

    <h2>Filter By Price</h2>
                <ol id="myAnchor">                        
                    <li><a id="0-20" href="#" >0.00 - 20.00</a></li>
                    <li><a id="20-50" href="#">20.00 - 50.00</a></li>
                    <li><a id="50-80" href="#" >50.00 - 80.00</a></li>
                    <li><a id="80-100" href="#">80.00 - 100.00</a></li>
                    <li><a id="All" href="#">All</a></li>
                </ol>

the list that will be shown:

<ul class="box-content">
        <?php endif ?>
        <li id="<?php 

        $price= $_item->getPrice();
        switch ($price)
        {
            case ($price<20):
            echo "0-20";
            break;

            case ($price>20 && $price<50):
            echo "20-50";
            break;

            case ($price>50 && $price<80):
            echo "50-80";
            break;

            case ($price>80 && $price<100):
            echo "80-100";
            break;
        } ?>" class="item<?php if (($i - 1) % $col == 0):?> first<?php elseif ($i % $col == 0): ?> last<?php endif; ?>">

javascript function:

(function(j$) {    
j$("#myAnchor").click(function(e)
          {
             var id=e.target.id;
             switch(id)
            {
            case("0-20"):
                    alert("something");
                var a = document.getElementsByTagName('li')
                var all_at_once = "";
                for(i=0;i<a.length;i++){
//                  alert(a[i].childNodes[0].text());
                    //if(a[i].childNodes[0].id=="20-50" || a[i].childNodes[0].id=="50-80"||a[i].childNodes[0].id=="80-100")
                      // j$('.box-content ul li').hide();
                            //a[i].childNodes[0].style.display="none";
                       ??????????? I don't knwo what to do in for loop
                }

            break;

        }

              }); //click anchor
    })(jQuery);//ready

IDs and class names must start with an alphabetical character. — BenM, Mar 27 '14 at 15:51
no I don't want to be unique I want to hide them I don't have problem in that part — Nickool, Mar 27 '14 at 15:52
If you don't want them to be unique, use classes instead. IDs **must** be unique. — j08691, Mar 27 '14 at 15:54
@Nickparsa you know, you can use more than one class name per element... — BenM, Mar 27 '14 at 15:55

Siva Charan · Accepted Answer · 2014-03-27T16:21:53.990

4

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

edited Mar 27 '14 at 16:21

answered Mar 27 '14 at 16:01

Siva Charan

17,940
9
60
95

Nice one! More simple than mine :) – MatuDuke Mar 27 '14 at 16:04
unfortunately it will hide the ranges it self too – Nickool Mar 27 '14 at 16:08
I could be wrong here, but aren't you hiding the wrong elements? I thought OP wanted to hide the prices in `.box-content`? – Dryden Long Mar 27 '14 at 16:08
Thank you :) neat n nice – Nickool Mar 27 '14 at 16:26

score 2 · Answer 2 · answered Mar 27 '14 at 15:56

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

<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>

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

If you are bothered about supporting older browsers (non-HTML5), don't use this method... — Jamie Barker, Mar 27 '14 at 15:59

Dryden Long · Answer 3 · 2014-03-27T16:11:13.737

@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:

<ol id="myAnchor">                        
    <li><a id="zero-20" href="#" >0.00 - 20.00</a></li>
    <li><a id="twenty-50" href="#">20.00 - 50.00</a></li>
    <li><a id="fifty-80" href="#" >50.00 - 80.00</a></li>
    <li><a id="eighty-100" href="#">80.00 - 100.00</a></li>
    <li><a id="All" href="#">All</a></li>
</ol>   


<ul class="box-content">
    <li class="zero-20">13$</li>
    <li class="twenty-50">23$</li>
    <li class="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/

I really don't know what is wrong that I cannot get it work in my code I even cannot alert anything in click function I don;t know why — Nickool, Mar 27 '14 at 16:18
yes but it didn't work in my code with php and everything although is so nice too +1 — Nickool, Mar 27 '14 at 16:27
@Nickparsa Then you might want to consider creating a new question with your new markup and code to figure out what is going wrong — Dryden Long, Mar 27 '14 at 16:30

MatuDuke · Answer 4 · 2014-03-27T16:38:12.570

0

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

edited Mar 27 '14 at 16:38

answered Mar 27 '14 at 15:57

MatuDuke

4,997
1
21
26

excuse me I cannot see your changes – Nickool Mar 27 '14 at 16:06

when click on list item hide other items

4 Answers4

Linked