Nested Accordion with jQuery & CSS3

What is Accordion

I am sure you have seen a squeezebox or also known as Accordions. It is musical instruments of the bellows-driven free-reed aerophone type A person who plays the accordion is called an accordionist. An accordion menu is a vertically stacked list of headers that can be clicked to reveal or hide content associated with them. It is one of many ways you can expose content to users in a progressive manner. This kind of menu is used in a web page where you can show your information dynamically to your viewers. 

A common example using a GUI accordion is the Show/Hide operation of a box region, but extended to have multiple sections in a list. This will help the readers to read the proper information. Like you can use it as asking a questions and when user click on that tab it will be scrolled down and it will give you answer in that open box. It looks more attractive because when a page load then those answers would be hidden but when you will clik with that mouse that will appear. 

A simple accordion that allows for a nested structure. The style comes with some examples of how to style three levels and how to add a media query for decreasing the size on smaller screens. Clicking a trigger element will open the content. https://tympanus.net/Blueprints/NestedAccordion/