List – Nested List – Treeview

HTML5
Share the knowledge with others
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Introduction

Hello friends, today I am going to explain to you how you can create a List, Nested List, and Treeview in HTML using Javascript and CSS. First of all, let’s start looking at the types of lists.

There are mainly two types of list: Order / Number List and Unordered / Bulleted List. Order / Number lists are used when the order of the items is important. For example, to prepare a cup of tea or register to a website, or taking a backup of your system.

Order / Number List

Below is an example of Number list:

  1. Boil 1/2 cup water.
  2. Continue boiling water and add Sugar & Tealeaves as per your tast.
  3. Continue boiling for another minute or two and add 1/2 cup milk.
  4. Continue boiling for another 2~3 minutes and your tea is ready.

The above list in HTML is called Ordered List. To create an ordered list, you need to use <ol> </ol> elements. Every list item should be within <li></li> tags under <ol> element.

The code to create the above example list is as below:

<ol>
    <li>Boil 1/2 cup water.</li>
    <li>Continue boiling water and 
        add Sugar & Tealeaves as per your tast.</li>
    <li>Continue boiling for another minute or 
        two and add 1/2 cup milk.</li>
    <li>Continue boiling for another 
        2~3 minutes and your tea is ready. </li>
</ol>

Unordered / Bulleted List

In contrast to the Ordered list, the unordered list is used to list the items where their sequence is not important. For example, a list of stationery items on your shopping list. It does not matter what item you buy first.

Below is an example of an unordered list.

  • Two blue ball point pens.
  • One Notebook with 100 pages.
  • One Notebook cover.
  • One Name stciker.

The above example creates an Unordered List. To create it, you need to use <ul> </ul> elements. This will create the main container. It tells the web browsers how to display contents under this element. Every item should be within <li></li> tags under <ul> element.

The code to create the above example list is as below:

<ul>
    <li>Two blue ball point pens.</li>
    <li>One Notebook with 100 pages.</li>
    <li>One Notebook cover.</li>
    <li>One Name stciker.</li>
</ul>
Note: Unordered list has wide range of usages including creating of navigation bars. I will cover this topic in my later posts.

Styling List

Styling Ordered List

By default, the ordered list starts with number 1. What if we want it to be Roman Numbers. You can style Ordered list in the following ways.

Styling in Roman Numbers

To make your ordered list appear with Roman Numbers format, you need to specify the type attribute with value either I (capital letter I) or i (lower case letter i). Whatever case you choose, the list appears in the same case.

For example:

Roman Number List - Click for live demo
Roman Number List

Styling in letters

To make your ordered list with alphabets starting from A or a , you need to specify the type attribute with value either A (capital letter A) or a (lower case letter a). Whatever case you choose, the list appears in the same case.

For example:

Letter Ordered List - Click for live demo
Letter Ordered List

Styling Unordered List

By default, the unordered list starts with a filled circle or a disc symbol, as shown in the example above. You can change that symbol to Disc (default), Circle, Square, or none. None!! Yes, you hear it right none; it is used to customize the styling of the list. Let us look into an example of each and will cover the complex part later.

Note: HTML5 uses CSS property, list-style-type, for styling unordered list. On the other hand, older version of HTML uses the type attribute.

Styling with Circle

You can change the default disc to a circle outline in the font color applied to the text. The fill color of the circle shape is transparent.

Circle Unordered List
Circle Unordered List

Styling with square

As the name suggests, it shows a filled square box in the font color applied to the text.

Square Bullet List
Square Bullet List

Styling with a custom icon

So far you have noticed that list either comes with numbers or symbols. What if you want to change it with your custom icon or symbol? This where the list-style-type: none; or type=”none” (None Style) comes handy. You definitely do not want two icons or symbols to your list. Do you?

Let us take a look at how the list looks when the style is set to none.

Bullet List with None Styling
Bullet List with None Styling

So now we do not have any bullets in our list. Let us try adding some custom text or emoji (UTF code) to our list. To set custom text or emoji, you need to specify the content CSS property of an <li> element with : before pseudo code. Let us look an output first and then we jump into the code.

Styling with custom text

  • Two blue ball point pens.
  • One Notebook with 100 pages.
  • One Notebook cover.
  • One Name stciker.

Styling with emoji

  • Two blue ball point pens.
  • One Notebook with 100 pages.
  • One Notebook cover.
  • One Name stciker.

To create the above list, you can use the below code:

<style>
   /* We need to show a symbol before every list element */
   #listCustomText li:before {
   /* Custom Text */
   content: '<>';
   /* Adjusting margins */
   margin-left: -20px;
   margin-right: 10px;
}
</style>
<div>
<p><strong>Styling with custom text</strong></p>
<div style="margin-left:40px">
<ul id="listCustomText" style="list-style-type:none;">
  <li>Two blue ball point pens.</li>
  <li>One Notebook with 100 pages.</li>
  <li>One Notebook cover.</li>
  <li>One Name stciker.</li>
</ul>
</div>
</div>
<style>
   /* We need to show a symbol before every list element */
   #listCustomEmoji li:before {
   /* Unicode Character Money-Mouth Face emoji */
   content: '\1F911';
   /* Adjusting margins */
   margin-left: -20px;
   margin-right: 10px;
}
</style>
<div>
<p><strong>Styling with emoji</strong></p>
<div style="margin-left:40px">
<ul id="listCustomEmoji" style="list-style-type:none;">
  <li>Two blue ball point pens.</li>
  <li>One Notebook with 100 pages.</li>
  <li>One Notebook cover.</li>
  <li>One Name stciker.</li>
</ul>
</div>
</div>


To add a custom image, you need to use list-style-image CSS property. You can check the code and output here.

Nested List

You can start <ul> or <ol> element within any <li> element to create a nested list. For example:

<ul>
    <li>
        <span>Stationary Items</span>
            <ul>
                <li>
                    <span>Marker</span>
                        <ul>
                            <li>Permanent Marker</li>
                            <li>White Board Marker</li>
                        </ul>
                </li>
            </ul>
            <ul>
                <li>
                    <span>Pen</span>
                        <ul>
                            <li>Ball Point Pen</li>
                            <li>Fountain Pen</li>
                        </ul>
                </li>
            </ul>
    
    
  </li>
</ul>

Nested List Output

  • Stationary Items
    • Marker
      • Permanent Marker
      • White Board Marker
    • Pen
      • Ball Point Pen
      • Fountain Pen

Creating Tree View from list

To create a Tree-View, you need to use JS for expanding and collapsing the node.

<style>
 #myTreeView {
  list-style-type: none;
}
#myTreeView ul {
list-style-type:none;
}

#myTreeView {
  margin: 0;
  padding: 0;
}

.expandable {
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}

.expandable::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.expanded::before {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari */'
  transform: rotate(90deg);  
}

.non-expandable {
  display: none;
}

.active {
  display: block;
}
</style>
<ul id="myTreeView">
    <li>
        <span>Stationary Items</span>
            <ul>
                <li>
                    <span class="expandable">Marker</span>
                        <ul class="non-expandable">
                            <li>Permanent Marker</li>
                            <li>White Board Marker</li>
                        </ul>
                </li>
            </ul>
            <ul>
                <li>
                    <span class="expandable">Pen</span>
                        <ul class="non-expandable">
                            <li>Ball Point Pen</li>
                            <li>Fountain Pen</li>
                        </ul>
                </li>
            </ul>
    
    
  </li>
</ul>

<script>
var toggler = document.getElementsByClassName("expandable");
var i;

for (i = 0; i < toggler.length; i++) {
  toggler[i].addEventListener("click", function() {
    this.parentElement.querySelector(".non-expandable").classList.toggle("active");
    this.classList.toggle("expanded");
  });
}
</script>

Tree-View Output

  • Stationary Items
      • Permanent Marker
      • White Board Marker
      • Ball Point Pen
      • Fountain Pen

FAQs

[WPSM_AC id=198]


Share the knowledge with others
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

7 thoughts on “List – Nested List – Treeview

  1. i have spent almost 5 minutes trying to anderstand what “solicitar” is in html
    google translates “order” that way. I think ordered would be more reliable

    1. Thanks, Javier for your valuable inputs. You must be using the Google Translate available in the sidebar. It is buggy at times in translation. But I feel very happy that you figured that out and most importantly point it out to me. I really appreciate your effort.

      I double-check my post for any spelling errors but it seems that Google Translate is wrongly presenting it as it is written as order in English. If I am not wrong the correct conversion in Spanish would be Orden?

      Thanks, Javier once again for your help.

      English Version to avoid any Auto Translation

      I am attaching the screenshot of my reply in the comment so that It will be skipped by Auto Translators

  2. That is the suitable weblog for anybody who wants to search out out about this topic. You understand so much its virtually exhausting to argue with you (not that I actually would want. You definitely put a brand new spin on a subject thats been written about for years. Great stuff, just nice!

  3. I really love your website.. Pleasant colors & theme. Did you build this website yourself? Please reply back as I’m planning to create my own personal blog and would love to know where you got this from or just what the theme is named. Thanks!

Leave a Reply to Javier Cancel reply

Your email address will not be published. Required fields are marked *