0

Is there a native way or widget on jupyter notebooks to set a markdown cell to create something like html tabs so I can add documentation on each language I want instead of creating 3 different notebooks that will add complexity in the maintainability of my experiments?

Being able to add something like this will suffice

<!-- Tab links -->
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'Spanish')">Spanish</button>
  <button class="tablinks" onclick="openCity(event, 'English')">English</button>
  <button class="tablinks" onclick="openCity(event, 'Japanese')">Japanese</button>
</div>

<!-- Tab content -->
<div id="Spanish" class="tabcontent">
  <h3>Spanish Explanation</h3>
  <p>This is an explanation in Spanish</p>
</div>

<div id="English" class="tabcontent">
  <h3>English Explanation</h3>
  <p>This is an explanation in English</p>
</div>

<div id="Japanese" class="tabcontent">
  <h3>Japanese Explanation</h3>
  <p>This is an explanation in Japanese</p>
</div>
sgaseretto
  • 421
  • 5
  • 13

1 Answers1

1

ipywidgets includes tabs and to make it look like a markdown cell you could either hide the code or make a Voila app. There are several extensions to do that, such as Hide input,Hide input all, & hide_code. (The first two are part of the community-contributed unofficial extensions (jupyter_contrib_nbextensions) that get installed as bundle. Voila is described here and there is a gallery of examples.

For something simpler that works natively in a notebook markdown cell and renders well for when the notebooks may be statically represented, there is collapsible markdown. A fancier version of this called Collapsible Headings is included as part of the unofficial extensions bundle I mentioned above.

Wayne
  • 6,607
  • 8
  • 36
  • 93
  • If you want a quickly accessible environment to test out that demo code at the link for the tabs widget, go to [here](https://github.com/binder-examples/jupyter-extension) and click the `launch binder` badge. After the sessions spins up run the code in the notebook that opens. Then paste the demo code from that link in a new cell. Add `import ipywidgets as widgets` as the first line of that cell you just made, and it will show the tabs. – Wayne Jan 24 '20 at 17:03