CODEWITHSUNDEEP
javascriptjquery
lookingGlass
lookingGlass

Reputation: 365

Hide h1 tag if div is empty from javascript's hide function

I need to hide an H1 title if the list is emptied.

basically i am saying. Choose from the select dropdown; if the selected value is shown hide all others. Now I also need to say if list category[h1] title is empty hide that too, otherwise display the h1 title.

http://jsfiddle.net/ajandthensome42/8Ye87/4/

If anyone could help I would be super grateful. 

  $(document).ready(function(){
     $("#selectForm").change(function(event) {
     $(".all").hide();
      $("." + this.value).fadeIn("slow");
      $(".multi").fadeIn("slow");


      var size = $(".language-list li").size();
      if(size === 0){
       $(".language-list h1").hide();
        }
       else {
       $(".language-list h1").show();
        }

       });
    });

Upvotes: 2

Views: 2128

Answers (2)

Divey
Divey

Reputation: 1719

Loop through all your h1 tags and show/hide based on whether the adjacent list has any visible elements. Try this: 

$( ".language-list h1" ).each(function() {
    if ($(this).next('ul').find('li:visible').length === 0) {
        $(this).hide();   
    } else {
        $(this).show();   
    }
});

To put it in context, here's the complete change handler: 

$(document).ready(function() {
    $("#selectForm").change(function(event) {
        $(".all").hide();
        $("." + this.value).fadeIn("slow");
        $(".multi").fadeIn("slow");

        $( ".language-list h1" ).each(function() {
            if ($(this).next('ul').find('li:visible').length === 0) {
                 $(this).hide();   
            } else {
                $(this).show();   
            }
        });
    });
});

Upvotes: 4

Simon
Simon

Reputation: 4814

Use the following simple code to check the amount of list-items:

var size = $(".language-list li").size();

if(size === 0)
{
   ...
}

Upvotes: 0

Related Questions