Home/ Questions/Q 8456183
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T12:28:54+00:00

i’m not sure but if i understood right js nextSibling focus next node ?

  • 0

i’m not sure but if i understood right js nextSibling focus next node ? So why i get trouble, when i want to select ul in a li ?

    <ul>
<li><input id="btn-page" type=button onclick="displayMenu();" /></li>
    <ul class="hide">
        <li>Some text</li>
    </ul>
    <li>...</li>
   </ul>

And my js function :

    function displayMenu() {
   var idMenu = event.target.id;
   var ulDisplay = document.getElementById(idMenu).nextSibling;
   ulDisplay.style.display = 'block';
}

I think i forgot something but i don’t know why. Thanks for help 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As @andreas pointed out the structure of your HTML is not valid because you can’t have a UL as child of a UL. But you can have a UL as a child of LI. So consider updating your HTML in this way. Helper function “Next()” from previous similar answer Hide an element's next sibling with Javascript used to find the UL

    <!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .hide { display: none; }
        </style>
        <title>Title</title>
        <script type="text/javascript">
            function next(elem) {
                do {
                    elem = elem.nextSibling;
                } while (elem && elem.nodeType != 1);
                return elem;                
            }

            function displayMenu(id) {
                var ulDisplay = next(document.getElementById(id));
                ulDisplay.style.display = 'block';
            }
        </script>
    </head>
    <body>
        <ul>
            <li>
                <input id="btn-page" value="show" type=button onclick="displayMenu(this.id);" />
                <ul class="hide"><li>Some text</li></ul>
            </li>
            <li>...</li>
        </ul>
    </body>
</html>
    • 0