Line 98: |
Line 98: |
| .checkbox { | | .checkbox { |
| list-style: none; | | list-style: none; |
| + | } |
| + | |
| + | .collapsible { |
| + | background-color: #777; |
| + | color: white; |
| + | cursor: pointer; |
| + | padding: 18px; |
| + | width: 100%; |
| + | border: none; |
| + | text-align: left; |
| + | outline: none; |
| + | font-size: 15px; |
| + | } |
| + | |
| + | .active, .collapsible:hover { |
| + | background-color: #555; |
| + | } |
| + | |
| + | .collapsible:after { |
| + | content: '\002B'; |
| + | color: white; |
| + | font-weight: bold; |
| + | float: right; |
| + | margin-left: 5px; |
| + | } |
| + | |
| + | .active:after { |
| + | content: "\2212"; |
| + | } |
| + | |
| + | .content { |
| + | padding: 0 18px; |
| + | max-height: 0; |
| + | overflow: hidden; |
| + | transition: max-height 0.2s ease-out; |
| + | background-color: #f1f1f1; |
| } | | } |
| | | |
Line 114: |
Line 150: |
| <br> | | <br> |
| <p><strong>[https://gccollab.ca/blog/view/13043649/priorities-for-advancing-the-government-of-canada-data-agenda-priorit-s-pour-faire-progresser-le-programme-de-donn-es-du-gouvernement-du-canada >> Read Chief Data Officer of Canada Stephen Burt's Priorities for Advancing the Government of Canada Data Agenda <small>(on GCcollab)</small>] </strong></p> | | <p><strong>[https://gccollab.ca/blog/view/13043649/priorities-for-advancing-the-government-of-canada-data-agenda-priorit-s-pour-faire-progresser-le-programme-de-donn-es-du-gouvernement-du-canada >> Read Chief Data Officer of Canada Stephen Burt's Priorities for Advancing the Government of Canada Data Agenda <small>(on GCcollab)</small>] </strong></p> |
| + | |
| + | <p>A Collapsible:</p> |
| + | <button class="collapsible">Open Collapsible</button> |
| + | <div class="content"> |
| + | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> |
| + | </div> |
| + | |
| + | <p>Collapsible Set:</p> |
| + | <button class="collapsible">Open Section 1</button> |
| + | <div class="content"> |
| + | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> |
| + | </div> |
| + | <button class="collapsible">Open Section 2</button> |
| + | <div class="content"> |
| + | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> |
| + | </div> |
| + | <button class="collapsible">Open Section 3</button> |
| + | <div class="content"> |
| + | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> |
| + | </div> |
| + | |
| + | <script> |
| + | 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.maxHeight){ |
| + | content.style.maxHeight = null; |
| + | } else { |
| + | content.style.maxHeight = content.scrollHeight + "px"; |
| + | } |
| + | }); |
| + | } |
| + | </script> |
| | | |
| <h2 style="padding-top:20px;">23 June 2022 — Engagement Session</h2> | | <h2 style="padding-top:20px;">23 June 2022 — Engagement Session</h2> |