Examples of Collapsible Content

Style 1

Click to see more: Given the following python code from pychartjs import BaseChart class myChart(BaseChart): pass chartJSON = myChart().get() Write the following HTML <div class="container"> <canvas id="myChart"></canvas> </div> ... and JS var data = {{ chartJSON | safe }} var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, data);

Style 2

Click to see more: Given the following python code: from pychartjs import BaseChart class myChart(BaseChart): pass chartJSON = myChart().get() Write the following HTML <div class="container"> <canvas id="myChart"></canvas> </div> ... and JS var data = {{ chartJSON | safe }} var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, data);

Notes

• All code block starter lines, e.g. ```python must be preceded by a blank space.
• The closing block ``` tag must be followed by a newline.
• The difference between Style 1 and Style 2 is a blank <tr></tr> tag at the start of the table body

---

Nested Collapsables

A Nested List:

Heading1

some text

Heading1.1

some more text

Heading1.1.1

even more text

Code:

<details>
<summary>Heading1</summary>
some text
<details>
<summary>Heading1.1</summary>
some more text
<details>
<summary>Heading1.1.1</summary>
 even more text
</details>
</details>
</details>

A Nested Tree:

Heading1

some text

• Heading1.1

  some more text

  • Heading1.1.1

    even more text

Code:

<details>
<summary>Heading1</summary>

some text
+ <details>
    <summary>Heading1.1</summary>

    some more text
    + <details>
        <summary>Heading1.1.1</summary>
        even more text
      </details>
   </details>
</details>

• Looks like you might need to add styles to each detail level to imitate h1, h2, etc.
• Blank lines and spacing are necessary for indentation and bullets.
• Remove the '+' and leading spaces to get rid of the indentation and bullets.