how to hide the upper div when all children are display none

Question

I have titles and they have siblings one of them which is a div clearfix, in this div there is a ul of box-content and there are items that some of them are hidden and some of them are shown there is a ol list that should be clicked on it, if there is no items in the list of items in this example Batteries it should not show the title header (the div class name which is reltitles) remember that we have many title headers and box contents and divs so it should work in general not a specific one

<div class="reltitles" id="Batteries" style="display:block;">
    <font class="resultHeader">(2) Batteries </font> 
</div>
<div class="clearfix" value="Batteries" name="Batteries" id="Batteries">
    <ul class="box-content" id="Batteries">
        <li id="50-80" class="item first" style="display: none;"></li>
        <li id="50-80" class="item first" style="display: none;"></li>
        <li id="20-50" class="item">
            something here 
        </li>
    </ul>
</div>

the list to be clicked:

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

this is my java script code that does not work I debugged with chrome tools and still I couldn't figure it out:

j$("#myAnchor li a").click(function(){
    var prices = j$(".box-content li");
    prices.show();
    if (this.id != "All")
    { prices.not(j$(".box-content li[id='"+this.id+"']")).hide();
    }
    var tt=document.getElementsByClassName("reltitles");
    for(k=0;k<tt.length;k++)
    {
        var clear=tt[k].nextElementSibling;
        var list=clear.childNodes[1].children;
        j=0;
        for(i=0;i<list.length;i++)
            {

            if(list[i].style.display=="none")
            {
                j++;
            }
            if(j==list.length)
                {
                tt[k].style.display="none";
                }
            else{ tt[k].style.display="block";}
            }
    }
     });

UPDATe: the ids are unique they will be generated by php code I just wanted to show it simpler

`ID's` have to be unique. You have duplicate `id="Batteries"` — Ani, Mar 28 '14 at 15:59

score 0 · Answer 1 · answered Mar 28 '14 at 16:21

Sorry, I am not entirely sure what you are exactly trying to do here. Here, I created a jsfiddle here http://jsfiddle.net/5VTYS/4/ in which I made changes to avoid the syntactical errors you had in your code mentioned below

$("#myAnchor li a").click(function(){

    var tt=document.getElementsByClassName("reltitles");
    var j = 0;
        for(k=0;k<tt.length;k++)
        {
            var clear=tt[k].nextElementSibling;
            var list=clear.childNodes[1].children;
            for(i=0;i<list.length;i++)
                {
                if(list[i].style.display=="none")
                {
                    j++;
                }
                if(j==list.length)
                    {
                    tt[k].style.display="none";
                    }
                }
        }

});

Please edit the code if there is something I understood incorrect.

But, there are some syntactical errors in your code:

var list=clear.childNodes[1].children(); should be var list=clear.childNodes[1].children;
j$("#myAnchor li a") should be this -> $("#myAnchor li a")
define j before incrementing the value.

Hope this helps.

for children you are right for j$ it is my var j$ in jquery you can use j$ instead of other things because of conflicts qith other verions — Nickool, Mar 28 '14 at 16:25

Julien B · Answer 2 · 2014-04-03T08:37:08.123

"here is an example based on your title topic :

HTML :

<div class="reltitles" id="Batteries" style="display:block;">
    <font class="resultHeader">(2) Batteries </font> 
</div>
<div class="clearfix" value="Batteries" name="Batteries" id="BatteriesList">
    <ul class="box-content" id="Batteries">
        <li id="50-80" class="item first" style="display: none;">batterie 1</li>
        <li id="50-80" class="item first" >Batterie 2</li>

        </ul>
    </div>
<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>

JS :

$("#myAnchor li a").click(function(){
   var visible = false;
    $('#BatteriesList').find('li').each(function(value) {
        visible |= $(this).is(":visible");
    });
    if (!visible) {
        $('#Batteries').hide();
    }
});

how to hide the upper div when all children are display none

2 Answers2