title: Django Templates Inclusion / Blocks
body: <p>I have the following template structure:</p>
  
  <p><strong>base.html:</strong></p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="main-content"&gt;
        {% block body %}{% endblock %}
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>detail.html</strong> extending base.html:</p>
  
  <pre><code>{% extends "base.html" %}
  
  {% block body %}
      &lt;!-- filter side panel --&gt;
      {% block filter_panel %}
      {% endblock %}
  {% endblock %}
  </code></pre>
  
  <p><strong>list.html</strong> extending base.html:</p>
  
  <pre><code>{% extends "base.html" %}
  
  {% block body %}
      &lt;!-- filter side panel --&gt;
      {% block filter_panel %}
      {% endblock %}
  {% endblock %}   
  </code></pre>
  
  <p><strong>filter.html:</strong></p>
  
  <pre><code>{% extends "detail.html" %}
  {% block filter_panel %}
    ...
    ...
  {% endblock%}
  </code></pre>
  
  <p>Now, I have implemented a filter panel which is invoked by a button using <code>onclick="filter_open()"</code>. The respective method is in an external JS file and basically opens a side panel:</p>
  
  <pre><code>function filter_open() {
    document.getElementById("filtersidebar").style.display = "block";
    document.getElementById("filtersidebar-outer").classList.add("fc-filters-overlay");
  }
  </code></pre>
  
  <p>This filter, I want to make available on detail.html and list.html. So, I created a new file <code>filter.html</code>. Both, the <code>detail.html</code> and the <code>list.html</code> have a <code>{% block filter %}{% endblock %}</code> and in <code>filter.html</code> I add the functionality within the respective Django blocks.</p>
  
  <p>The button however, now throws an error:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'style' of null
    at filter_open (main.js:146)
    at HTMLButtonElement.onclick ((index):158)
  </code></pre>
  
  <p>I guess this is because I moved the filter to 'filter.html'. </p>