Solution 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.

Problem :

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>

Comments

Comment posted by here

If you want a quickly accessible environment to test out that demo code at the link for the tabs widget, go to

By

Leave a Reply

Your email address will not be published. Required fields are marked *