Jupyter slides template with code toggle button

slides.html.jinja2

{%- extends 'slides_reveal.tpl' -%}


{% block input_group -%}
<div class="input_wrapper">
    {{ super() }}
</div>
{% endblock input_group %}


{% block pre_slides %}
{{ super() }}
<div id="header">
    <!-- <div class="header-left"></div> -->
    <!-- <div class="header-right"></div> -->
    <div class="footer-left">
        <a id="code_button" class="btn"><i class="fas fa-code"></i></a>
    </div>
    <!-- <div class="footer-right"></div> -->
</div>
{% endblock pre_slides %}


{% block post_slides %}
{{ super() }}
<script type="text/javascript">
    var header = $('#header');
    if (window.location.search.match(/print-pdf/gi)) {
        $('.slides > section').prepend(header);
    } else {
        $('div.reveal').append(header);
    }
</script>
{% endblock post_slides %}


{%- block header -%}
{{ super() }}
<style type="text/css">
    .reveal div.header-left {
        position: fixed;
        top: 15px;
        left: 30px;
        padding: 0;
        margin: 0;
        z-index: 30;
    }

    .reveal div.header-right {
        position: absolute;
        top: 15px;
        right: 30px;
        padding: 0;
        margin: 0;
        z-index: 30;
    }

    .reveal div.footer-left {
        position: fixed;
        bottom: 30px;
        left: 30px;
        padding: 0;
        margin: 0;
        z-index: 30;
        font-size: 24px;
    }

    .reveal div.footer-right {
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 0;
        margin: 0;
        z-index: 20;
    }

    .reveal #header i {
        font-size: 24px;
        color: grey;
    }
</style>

<script>
    $(document).ready(function () {
        $("div.input_wrapper").hide();
        var shown = false;
        $("#code_button").click(function () {
            if (shown) {
                $("div.input_wrapper").slideUp();
            } else {
                $("div.input_wrapper").slideDown();
            }
            shown = !shown;
        });
    })
</script>

{%- endblock header -%}