Search code examples
javascriptjqueryhtmltoggleshow-hide

jquery how to hide a single element from others if not exist

I am working on a sidebar with (single menu) and (submenus).

The menus that contains (submenu) has (+-) toggle, and the ones with singles has nothing.

How can I hide the (+-) of the single menus from other similar elements.

I have tried this way, it hides for all of them.

HTML

<div class="multitoggle">
    <ul id="accordions">
        <li class="nav-parents">
            <div class="link"> <span class="plus">+</span> <span class="minus">-</span> <a href="#">CURRENT ACCOUNTS</a></div>
            <ul class="submenu">
                <li><a href="../current/third-level.php">MPOWER CLASSIC</a></li>
                <li><a href="../current/third-level.php">MPOWER GOLD</a></li>
                <li><a href="../current/third-level.php">MPOWER PLATINUM</a></li>
            </ul>
        </li>
        <li class="nav-parents">
            <div class="link"> <span class="plus">+</span> <span class="minus">-</span> <a href="#">OUR SEGMENTS</a></div>
        </li>
    </ul>
</div>

JS

$(window ).load(function(e) {
    if ($('.nav-parents').has('submenu').length == 0) {
        $('.nav-parents').find('.plus, .minus').css('display', 'none');
    }
});
Solution

  • Actually only has() will not work in this case. You have to use the combination of not() and has(). And also you missed the dot before submenu. You can do it like following.

    $(window ).load(function(e) {
    $('.nav-parents').not(':has(.submenu)').find('.plus, .minus').css('display', 'none');
});