CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
Nickool
Nickool

Reputation: 3702

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

Upvotes: 0

Views: 2305

Answers (4)

MatuDuke
MatuDuke

Reputation: 5008

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

Upvotes: 0

Siva Charan
Siva Charan

Reputation: 18064

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

Upvotes: 4

Dryden Long
Dryden Long

Reputation: 10182

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

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

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

Upvotes: 2

Related Questions