Dynamic expandable collapsable layout parent child hierarchy Title Move v show hide contents markdown load save hierarchy contents expand collapse all depth color changes user to set colors for different boxes move depth order style body min height 600px box sizing border box button border none padding 0px margin 0px margin left 5px margin right 5px text align center text decoration none cursor pointer font size 8pt height 8pt line height 7pt input type color webkit appearance none padding 0 margin 0 border 0 width 7pt height 7pt line height 7pt font size 0 border 0 1px solid rgba 100 100 100 0 5 input type color webkit color swatch wrapper padding 0 margin 0 input type color webkit color swatch border none padding 0 margin 0 div transition all 2s linear webkit transition all 2s ease moz transition all 2s ease outline 0 hide position absolute display none header vertical align top important padding 0 margin 0 height auto font size 0 background color rgba 200 200 200 0 2 content color blue min height 20px tab position relative border 0px dashed blue margin 5px margin left 20px margin right 0px border left 1px dashed rgba 200 200 200 0 5 style button href onclick save Save button button href onclick load Load button br script function add title text parent if parent parent document getElementById container if parent parent document createElement div parent id container document body appendChild parent if parent parent document body let current document createElement div current className tab parent appendChild current let header document createElement div header className header let content document createElement div content className content content contentEditable true current appendChild header current appendChild content header innerHTML Title Move v show hide header appendChild document createElement button 0 header appendChild document createElement button 1 header appendChild document createElement button 2 header appendChild document createElement button 3 header appendChild document createElement button 4 header appendChild document createElement button 5 header appendChild document createElement button 6 header appendChild document createElement button 7 header appendChild document createElement input 8 header children 0 innerHTML 8854 header children 0 style position absolute header children 0 style left 10px header children 0 style top 0px header children 1 innerHTML title header children 1 style margin left 20px header children 2 innerHTML add header children 3 innerHTML delete header children 4 innerHTML 9668 header children 5 innerHTML 9658 header children 6 innerHTML x25B2 header children 7 innerHTML x25BC header children 8 type color header children 8 value ffffff current style background color header children 8 value current children 0 style background color header children 8 value current children 1 style background color header children 8 value header children 0 onclick function content classList toggle hide current children forEach child i if i 2 return child classList toggle hide if content classList contains hide header children 0 innerHTML 8853 else header children 0 innerHTML 8854 header children 2 onclick function add title Empty current parentElement header children 3 onclick function if confirm Are you want to delete this item and all children return current parentElement removeChild current header children 4 onclick function left let p current parentElement if p return let pp p parentElement if pp return if pp classList contains tab return if p id container return let index Array prototype indexOf call pp children p console log index index p removeChild current pp insertBefore current pp children index 1 pp appendChild current header children 5 onclick function right let p current parentElement if p return if p id container p children length 2 return let index Array prototype indexOf call p children current if p id container index 2 return if p id container index 1 return p removeChild current p children index 1 appendChild current header children 6 onclick function up let p current parentElement if p return if p children length 2 return let index Array prototype indexOf call p children current if index 0 return if p id container index 3 return p removeChild current p insertBefore current p children index 1 header children 7 onclick function down let p current parentElement if p return if p id container p children length 2 return let index Array prototype indexOf call p children current if index p children length 1 return p removeChild current p insertBefore current p children index 1 header children 8 onchange header children 8 oninput function current style background color header children 8 value current children 0 style background color header children 8 value current children 1 style background color header children 8 value content innerHTML text return current function randomContent return Contents Math round Math random 1000 let root add lev1 randomContent let a add test randomContent root let b add lev2 randomContent a add lev3 randomContent function save let container document getElementById container if container return function retrieve tree store store content null if tree classList contains tab store content title tree children 0 children 1 innerHTML text tree children 1 innerHTML store children for let i 0 i tree children length i if tree children i classList continue if tree children i classList contains tab continue store children push let child store children store children length 1 retrieve tree children i child let data retrieve container data let rawdata JSON stringify data var a document createElement a var file new Blob rawdata type json a href URL createObjectURL file a download writerplanner json a click console log JSON stringify data function load let inputdiv document createElement input inputdiv type file inputdiv accept json json inputdiv onchange function const fileList this files let reader new FileReader no arguments reader readAsText this files 0 reader onload function document getElementById container innerHTML let jsoncontents JSON parse reader result function loadchildren data parentnode let node null if data content node add data content title data content text parentnode for let i 0 i data children length i loadchildren data children i node loadchildren jsoncontents null inputdiv click script
current parentElement removeChild current header children 4 onclick function left let p current parentElement if p return let pp p parentElement if pp return if pp classList contains tab return if p id container return let index Array prototype indexOf call pp children p console log index index p removeChild current pp insertBefore current pp children index 1 pp appendChild current header children 5 onclick function right let p current parentElement if p return if p id container p children length 2 return let index Array prototype indexOf call p children current if p id container index 2 return if p id container index 1 return p removeChild current p children index 1 appendChild current header children 6 onclick function up let p current parentElement if p return if p children length 2 return let index Array prototype indexOf call p children current if index 0 return if p id container index 3 return p removeChild current p insertBefore current p children index 1 header children 7 onclick function down let p current parentElement if p return if p id container p children length 2 return let index Array prototype indexOf call p children current if index p children length 1 return p removeChild current p insertBefore current p children index 1 header children 8 onchange header children 8 oninput function current style background color header children 8 value current children 0 style background color header children 8 value current children 1 style background color header children 8 value content innerHTML text return current function randomContent return Contents Math round Math random 1000 let root add lev1 randomContent let a add test randomContent root let b add lev2 randomContent a add lev3 randomContent function save let container document getElementById container if container return function retrieve tree store store content null if tree classList contains tab store content title tree children 0 children 1 innerHTML text tree children 1 innerHTML store children for let i 0 i tree children length i if tree children i classList continue if tree children i classList contains tab continue store children push let child store children store children length 1 retrieve tree children i child let data retrieve container data let rawdata JSON stringify data var a document createElement a var file new Blob rawdata type json a href URL createObjectURL file a download writerplanner json a click console log JSON stringify data function load let inputdiv document createElement input inputdiv type file inputdiv accept json json inputdiv onchange function const fileList this files let reader new FileReader no arguments reader readAsText this files 0 reader onload function document getElementById container innerHTML let jsoncontents JSON parse reader result function loadchildren data parentnode let node null if data content node add data content title data content text parentnode for let i 0 i data children length i loadchildren data children i node loadchildren jsoncontents null inputdiv click script