John John - 1 month ago 6
HTML Question

Show/Hide li elements from ul

I need to hide some particular li elements from an ul based on a form logic as follow: if some textboxes are in blank hide particular li elements from the menu (ul). The thing is that they are not using id nor classes on li. Please kindly see my fiddle code: `https://jsfiddle.net/u0dx0qpo/

This is the whole logic, if mentioned inputs are blank show only "Download & Print Applications" and "FAQS" else show full menu.

This is the function I was trying to use:

$(document).ready(function(){
if ($("#firstname").val() == "" || $("#lastname").val() == "" || $("#socialsecuritynumber").val() == "" || $("#emailaddress1").val() == ""){
//$('li').not('[title="Download & Print Applications",title="FAQ"]').hide();
}


Or better yet, I dont know if is possible to hide some particular li based on other attribute such as title, something like:
$('att:xx').hide();
as I'm using another menu in the same page that I don't want to affect or modify from this code...

Answer

if you're using jquery you can access elements with other attributes:

$(document).ready(function(){    
        if ($("#firstname").val() == "" || $("#lastname").val() == "" || $("#socialsecuritynumber").val() == "" || $("#emailaddress1").val() == ""){
          $('li').hide();
          $("li[data-sitemap-node='/knowledge-base/article/']").show();
          $("li[data-sitemap-node='/content/blank-page/']").show();      
        }
});

js fiddle