style font family Open Sans line height 1 6 font size 13px html background CCC padding bottom 100vh body background FFF max width 500px margin auto margin top 20px padding 100px min height calc 100vh 240px box shadow 0 0 10px min height 400px Style the button that is used to open and close the collapsible content noncollapsible collapsible background color eee color 44b cursor pointer padding 5px width 100 border none text align left outline none collapsible after content 02795 Unicode character for plus sign color blue float right margin left 5px active after content 2796 Unicode character for minus sign Add a background color to the button if it is clicked on add the active class with JS and when you move the mouse over it hover active collapsible hover background color ccc Style the collapsible content Note hidden by default content padding 0 margin left 0px display none overflow hidden background color f1f1f1 height 0px transition 1s style script function SetupCollapsibleButtons var coll document getElementsByClassName collapsible var i for i 0 i coll length i coll i addEventListener click function this classList toggle active var content this nextElementSibling if content style height 0px content style height content style height content scrollHeight px else content style height 0px script span id notes style visibility hidden position absolute left 1000px Date 01 08 2020 Make example available Date 02 08 2020 Remove old examples Date 09 08 2020 Update notes Details Update R Update dates Email check Upload to system Strengthen limit Date 10 08 2020 Missing notes Details Add sample Add document Add regulator Add a description Checklist Fix crash span div id container div script function removeLeadingNewlines str let val str split n if val length 1 if val 0 length 2 val splice 0 1 val val join n return val let txt document getElementById notes innerHTML let parts txt split document writeln no parts parts length let data Date Details Checklist for let i 0 i parts length i let part parts i let fields part split if fields length 2 continue field fields 0 switch field case Date date fields 1 split 0 data push data data length 1 date date let title parts i title title split title splice 0 1 title title join data data length 1 title title break case Details let details parts i details details split details splice 0 1 details details join details removeLeadingNewlines details details details split join bull data data length 1 details details break case Checklist let checklist parts i checklist checklist split checklist splice 0 1 checklist checklist join checklist removeLeadingNewlines checklist checklist checklist split join bull data data length 1 checklist checklist break default console log i unknown tag part console assert false function createElement t let bb document createElement t document getElementById container appendChild bb return bb for let i 0 i data length i let contents false if data i details undefined contents true if data i checklist undefined contents true let bb createElement button bb className collapsible if contents bb className noncollapsible bb innerHTML data i date data i title let dd createElement div dd className content if data i details undefined data i details data i details split n join br if data i checklist undefined data i checklist data i checklist split n join br if data i details undefined let gg document createElement div dd appendChild gg let kk document createElement div gg appendChild kk kk innerHTML Details kk style width 90px kk style float left let mm document createElement div gg appendChild mm mm style width 85 mm style float left mm innerHTML data i details if data i checklist undefined let gg document createElement div dd appendChild gg let kk document createElement div gg appendChild kk kk innerHTML Checklist kk style width 90px kk style float left let mm document createElement div gg appendChild mm mm style width 80 mm style float left mm innerHTML data i checklist SetupCollapsibleButtons script
eld case Date date fields 1 split 0 data push data data length 1 date date let title parts i title title split title splice 0 1 title title join data data length 1 title title break case Details let details parts i details details split details splice 0 1 details details join details removeLeadingNewlines details details details split join bull data data length 1 details details break case Checklist let checklist parts i checklist checklist split checklist splice 0 1 checklist checklist join checklist removeLeadingNewlines checklist checklist checklist split join bull data data length 1 checklist checklist break default console log i unknown tag part console assert false function createElement t let bb document createElement t document getElementById container appendChild bb return bb for let i 0 i data length i let contents false if data i details undefined contents true if data i checklist undefined contents true let bb createElement button bb className collapsible if contents bb className noncollapsible bb innerHTML data i date data i title let dd createElement div dd className content if data i details undefined data i details data i details split n join br if data i checklist undefined data i checklist data i checklist split n join br if data i details undefined let gg document createElement div dd appendChild gg let kk document createElement div gg appendChild kk kk innerHTML Details kk style width 90px kk style float left let mm document createElement div gg appendChild mm mm style width 85 mm style float left mm innerHTML data i details if data i checklist undefined let gg document createElement div dd appendChild gg let kk document createElement div gg appendChild kk kk innerHTML Checklist kk style width 90px kk style float left let mm document createElement div gg appendChild mm mm style width 80 mm style float left mm innerHTML data i checklist SetupCollapsibleButtons script