eabase/GitHub_Collapsible_Content.md

## GitHub_Collapsible_Content.md

      
    Raw
  

              GitHub_Collapsible_Content.md
            
          
    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.