Nested List - Vertical Tree View

Dynamically Building Nested List from JSON data and Vertical Tree view with pure CSS3

Medium Article

Table of Contents

1. Description
2. Documentation
3. Getting Started
4. Built With
5. Contributing
6. License

Description

Building a tree view for the hierarchical data is a common task in the front-end development of web applications. In most cases, hierarchical data is available in JavaScript Object Notation (JSON) which is a lightweight data format, and we need to represent this data as a tree on the webpage. In this tutorial, we will walk through the steps to dynamically create a nested list from the JSON data and style it to a vertically oriented tree view. The tutorial will use jQuery expression evaluation statement, Flexbox layout, and Pseudo-classes and Pseudo-elements from CSS3.

Documentation

Read the documentation here.

Getting Started

Open index.html file in your favorite web browser.

Built With

• HTML5

• CSS Flexbox Model

• Pseudo-classes and Pseudo-elements

• jQuery

Contributing

Pull requests are welcome.

1. Fork the repository.
2. Create your new feature branch: git checkout -b new-feature-branch
3. Stage your changes: git add .
4. Commit the changes: git commit -m "add commit message"
5. push to the branch: git push origin new-feature-branch
6. Submit a pull request.

License

This project is licensed under the MIT License.