posts/hide-the-input-cells-from-your-ipython-slides.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "A tweet arrived...\n",
    "\n",
    "<blockquote class=\"twitter-tweet\" data-partner=\"tweetdeck\"><p><a href=\"https://twitter.com/damian_avila\">@damian_avila</a> Is there a way to only show the output of a cell in an NB slideshow?</p>&mdash; Thomas Wiecki (@TWiecki) <a href=\"https://twitter.com/TWiecki/statuses/388378339716505601\">October 10, 2013</a></blockquote>\n",
    "<script async src=\"//platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n",
    "\n",
    "And my answer was **YES**...\n",
    "\n",
    "How we can easily do it? Just follow these few steps:\n",
    "<!-- TEASER_END -->\n",
    "\n",
    "**Rational**: We are going to use the power of `IPython.nbconvert` library to use a modified **jinja** template which will let us hide the` input cells` in our **IPython slides**. To achieve this goal, we are going to use the same approach described in a previous [post](../posts/mimic-the-ipython-notebook-cell-execution.html). Hence, our `input cells` will be hidden by default, but they will show up if we click on the corresponding `output cell` area.\n",
    "\n",
    "OK, I first wrote a custom template and named it as `output_toggle.tpl`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "{%- extends 'slides_reveal.tpl' -%}\r\n",
      "\r\n",
      "{% block input_group -%}\r\n",
      "<div class=\"input_hidden\">\r\n",
      "{{ super() }}\r\n",
      "</div>\r\n",
      "{% endblock input_group %}\r\n",
      "\r\n",
      "{%- block header -%}\r\n",
      "{{ super() }}\r\n",
      "\r\n",
      "<script src=\"//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"></script>\r\n",
      "\r\n",
      "<style type=\"text/css\">\r\n",
      "//div.output_wrapper {\r\n",
      "//  margin-top: 0px;\r\n",
      "//}\r\n",
      ".input_hidden {\r\n",
      "  display: none;\r\n",
      "//  margin-top: 5px;\r\n",
      "}\r\n",
      "</style>\r\n",
      "\r\n",
      "<script>\r\n",
      "$(document).ready(function(){\r\n",
      "  $(\".output_wrapper\").click(function(){\r\n",
      "      $(this).prev('.input_hidden').slideToggle();\r\n",
      "  });\r\n",
      "})\r\n",
      "</script>\r\n",
      "{%- endblock header -%}\r\n",
      "\r\n"
     ]
    }
   ],
   "source": [
    "!cat /media/datos/Ejemplos/output_toggle.tpl"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "The code is simple, but for a detailed explanation see my previous [post](../posts/mimic-the-ipython-notebook-cell-execution.htm).\n",
    "\n",
    "Briefly, I just changed obvious things such as the encompassing of the `input_group` and the calling of `.prev()` method (instead of `.next(`) one) inside the little *javascript* snippet.\n",
    "\n",
    "Now, the second and last step was:\n",
    "\n",
    "`ipython nbconvert your_slides.ipynb --to slides --template output_toggle --post serve`\n",
    "\n",
    "and I got something like this (navigate and try it!):"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<iframe src=\"http://damianavila.github.io/miscellaneus/test_slides.slides.html#/3/2\" width=\"800\" height=\"600\"></iframe>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "OK, as you have seen in the example, your **IPython slides** will be delivered showing just the `output cells`... but if you need to show some `input cells`, just click on the corresponding `output cell` and you will get them. Nice, uh!\n",
    "\n",
    "Hope it helps Thomas (and all the other people using the **IPython slides**)!\n",
    "\n",
    "Damián."
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.8"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 1
}