CODEWITHSUNDEEP
javascriptjquery
0xburned
0xburned

Reputation: 2655

how to use jquery show() on li when parent ul is hidden

In one of my function I am hiding the parent unordered list at the beginning of page load and based on certain condition I am showing one of the list element under the hidden parent ul. However, the below code is not working. Using below mentioned function<ul id="menu"> is hidden completely and I am not able to populate the respective li elements.

HTML mark up

<ul id="menu">
    <li id="mainMenuGroup_mostPopular"></li>
    <li id="mainMenuGroup_slots"></li>
    <li id="mainMenuGroup_table"></li>
    <li id="mainMenuGroup_roulette"></li>
    <li id="mainMenuGroup_poker"></li>
    <li id="mainMenuGroup_mobileiOS"></li>
    <li id="mainMenuGroup_mobileAndroid"></li>
    <li id="mainMenuGroup_mobileWinPhone"></li>
</ul>

This is my function

function deviceDetectionScript() {

    var mobileDetection = new MobileDetect(window.navigator.userAgent);

    if (mobileDetection.mobile()) {

        $('ul#menu').hide();

        if (mobileDetection.os() == 'iOS') {
            $('ul#menu').find('li#mainMenuGroup_mobileiOS').show();
            show_tab_content('mobileiOS');
        }

        if (mobileDetection.os() == 'AndroidOS') {
            $('ul#menu').find('li#mainMenuGroup_mobileAndroid').show();
            show_tab_content('mobileAndroid');
        }

        if (mobileDetection.os() == 'WindowsMobileOS' || mobileDetection.os() == 'WindowsPhoneOS') {
            $('ul#menu').find('li#mainMenuGroup_mobileWinPhone').show();
            show_tab_content('mobileWinPhone');
        }

    } else {
        $('ul#menu').show();
    }
}

Upvotes: 0

Views: 305

Answers (2)

Amit Kumar
Amit Kumar

Reputation: 5962

you don't need to hide ul. you should hide li except you want to show li. like this

$('#menu > li').not('#mainMenuGroup_table').hide();

Upvotes: 3

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

First of all, you can not show child elements if the parent element is hidden. You need to hide all the lis except the specific one. You can use .not() method for that. 

 if (mobileDetection.mobile()) {
     if (mobileDetection.os() == 'iOS') {
         $('ul#menu').find("li").not('#mainMenuGroup_mobileiOS').hide();
         show_tab_content('mobileiOS');
     }

Upvotes: 3

Related Questions