single static webpage with an interactive ordered list -- 2

I need a simple, one page website where you can load html script with ordered lists and an interactive page that lets the user interact with the lists by collapsing and expanding list items is created from the html. These lists will have ordered lists within ordered lists. When the list is created, if an "item" (anything with a "li" tag) is tapped or clicked, it will collapse the contents below it. Tapping or clicking on the collapsed item again will expand the contents if there's anything under the item. I am looking for a simple solution to this. I do not need any database or CMS installed or setup. Just a simple page that interprets html code and builds out a single page as it's needed. Below is how I would like the page to function: 1. The page starts with an empty text box where html script is loaded 2. The user copies and pastes their html code into the box and clicks "go" or, "create" 3. The ordered lists are presented and the user can click "items" to collapse or expand them Below are more details of what I'm looking for: 1. The website should be variable width (100% wide) and not a fixed size 2. A box will be available where the user will enter the html that contains the ordered lists (<ol><li>item</li></ol>) with a button at the bottom that says "create". The webpage will then create the ordered list and everything should be collapsed when first loaded 3. If there any content, sublists or information below an item, it is considered a main list 4. Each main list should have two items off on the right side: "+" and "++" a. Tapping or clicking the + will only expand the next level down, but collapsed if it has any sub items under it b. The ++ expands everything: all sub lists and content 5. If the item is already expanded and it has content and sub lists below it, it should have a "-" off to the right which will collapse the item to a single line of text 6. This line should not be truncated and should display the entire item. 7. If it is collapsed, it should show the + and ++ off to the right 8. The lists supports html tags: tables, divs, etc 9. Pinch to zoom works and on mobile, it readjust the content width 10. When viewed on mobile, the text should zoom in and the width of the new zoom setting will be readjusted 11. This page should run on all modern browsers both desktop and mobile I would also like to have the lists numbered with a more structured outline system: First level with Roman numerals, followed by capital letters for second level items, then numbers, etc. Please see the sample text file of html attached to this project. Future considerations (not to be included with this project): 1. log in with facebook, google, twitter to have multiple lists 2. sync with google docs? 3. expand into a customizable mind map website & app