How can I hide code and rerun all cells in a jupyter notebook?

Question

I'd like to add some sort of functionality at the beginning of a Jupyter Notebook that hides / shows all cells and reruns all cells. What I'd like to end up with is a set of charts that are refreshed when all cells are re-run.

---

The details and what I've tried:

The post IPython - Run all cells below from a widget shows how you can add a button to rerun all cells below. And the post How to hide code from cells in ipython notebook visualized with nbviewer? . With this setup in two different cells I end up with this:

When the cells are collapsed it looks like this:

And this works pretty well, but I'm just really curious if it's possible to format the buttons so that they look the same. And maybe it's possible to align them as output from the same cell? I've tried to do just that by having the two snippets in the same cell, but now it seems that the Hide button is overwritten by the Refresh button :

Snippet 1:

from IPython.display import HTML

HTML('''<script>
  function code_toggle() {
    if (code_shown){
      $('div.input').hide('500');
      $('#toggleButton').val('Show code')
    } else {
      $('div.input').show('500');
      $('#toggleButton').val('Hide code')
    }
    code_shown = !code_shown
  }

  $( document ).ready(function(){
    code_shown=false;
    $('div.input').hide()
  });
</script>
<form action="javascript:code_toggle()"><input type="submit" id="toggleButton" value="Show code"></form>''')

from IPython.display import Javascript, display
from ipywidgets import widgets

def run_all(ev):
    display(Javascript('IPython.notebook.execute_cells_below()'))

button = widgets.Button(description="Refresh")
button.on_click(run_all)
display(button)

And now I end up with this:

Output 1:

Does anyone know how to make this a bit more elegant?

Answer 1

I really hope someone is able to provide a better answer, but having tried and failed for a couple of hours, I've found this:

By simply mixing a few parts of the two snippets in the question, I'm able to set up a Refresh button in the same format as the Hide Code buttion :

Ouptput / Notebook View:

But this still requiers two code snippets in two different cells, as well as some test code in a third cell:

Cell / snippet 1:

from IPython.display import HTML

HTML('''<script>
  function code_toggle() {
    if (code_shown){
      $('div.input').hide('500');
      $('#toggleButton').val('Display code')
    } else {
      $('div.input').show('500');
      $('#toggleButton').val('Hide Code')
    }
    code_shown = !code_shown
  }

  $( document ).ready(function(){
    code_shown=false;
    $('div.input').hide()
  });
</script>
<form action="javascript:code_toggle()"><input type="submit" id="toggleButton" value="Display code"></form>''')

Cell / snippet 2:

HTML('''<script>

</script>
<form action="javascript:IPython.notebook.execute_cells_below()"><input type="submit" id="toggleButton" value="Refresh"></form>''')

Cell / snippet 3:

try: x
except NameError: x = None

if x is None:
    x = 0
    print(x)
else:
    x = x + 1
    print(x)

However, I'm still not able to display the two buttons beautifully side by side, and the display flickers when I hit Refresh .