Home/ Questions/Q 610473
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T17:40:45+00:00

I am working on a small script where there are some list items. If

  • 0

I am working on a small script where there are some list items. If you refer to the below code you will notice that there are 15 list items. Now I just want to display 9 of them say the user log’s in the 1st time the first nine should be displayed now if he clicks on list no. 7 then list no 3, 4, 5, 6, 7, 8, 9, 10, 11 should be displayed.

Will I have to give id to each and every list?

Thanks 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>Title</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="/library/styles/styles.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <ul id="list1">
            <li><a href="1">1</a></li>
            <li><a href="2">2</a></li>
            <li><a href="3">3</a></li>
            <li><a href="4">4</a></li>
            <li><a href="5">5</a></li>
            <li><a href="6">6</a></li>
            <li><a href="7">7</a></li>
            <li><a href="8">8</a></li>
            <li><a href="9">9</a></li>
            <li><a href="10">10</a></li>
            <li><a href="11">11</a></li>
            <li><a href="12">12</a></li>
            <li><a href="13">13</a></li>
            <li><a href="14">14</a></li>
            <li><a href="15">15</a></li>
        </ul>
        <!-- start: javascripts -->
        <script type="text/javascript">
            var ul = document.getElementById("list1");
            var liNodes = [];

            for (var i = 0; i < ul.childNodes.length; i++) {
                if (ul.childNodes[i].nodeName == "LI") {
                    liNodes.push(ul.childNodes[i]);
                }
            }

            document.write("LiNodes:" +liNodes.length);
            if (liNodes.length < 9) {
                display_nine(); 
            }

            function display_nine() {
            }
        </script>
        <!-- end: javascripts -->
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could do this with CSS and JavaScript or just JavaScript.

    CSS:

    to Hide

    display: none;

    to Show

    display: block;

    Then give each an id. Set the hidden to display:none then in JavaScript set to block when the user clicks on number 7.

    OR

    JavaScript:

    Write the HTML of the List based on user interaction

    document.write('<li><a href="13">13</a></li>');

    And use a function call for Number Seven to write the entire list when clicked.

    You could also place this in a DIV and re-write the list in the DIV based on user interaction.

    • 0