title: How to use django {% block %} to open clicked link in same page
body: <p>This is my project.html page-<img src="https://i.stack.imgur.com/OAAzk.png" alt="enter image description here"></p>
  
  <p>Here the list in sidebar is coming  from database which contain project branch eg. IT and project subbranch eg. website Designing and Application Designing .What i want is that, when i click on the desired subbranch then all the projects having that subbranch display on right side of sidebar (where proj1 and proj2 are present). So please anybody tell me what is the optimum solution to do that.Currently i am thinking of some solutions-</p>
  
  <ol>
  <li>To use {% block %} and extends concept.</li>
  <li>To make separate .html file and pass some arguments from view.py so that content can change accordingly.</li>
  </ol>
  
  <p>Actually i really don't know what is the correct way to do this, also don't know how to implement this.Can anybody please help me out.</p>
  
  <p><strong>My modal.py file is-</strong></p>
  
  <pre><code>class branch(models.Model):
      branch_title = models.CharField(max_length=50)
  
  class subbranch(models.Model):
      parentbranch = models.ForeignKey(branch)
      subbranch_title = models.CharField(max_length=50)
  
  class project(models.Model):
      project_title = models.CharField(max_length=50)
      project_image = models.ImageField(upload_to="Images/Project")
      project_desc = models.TextField(max_length=5000)
      project_duration = models.CharField(max_length=50)
      project_branch = models.ForeignKey(branch)
      project_subbranch = models.ForeignKey(subbranch)
  
      def __unicode__(self):              
              return str(self.project_title)
  </code></pre>
  
  <p><strong>My project.html file is-</strong></p>
  
  <pre><code>{% load staticfiles %}&lt;!-- project.objects.filter(project_branch=3)
  --&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
      &lt;title&gt;Projects&lt;/title&gt;
      &lt;div&gt;{% include "mutech/header.html" %}&lt;/div&gt;
      &lt;link href="{% static 'mutech/css/project_dropdown_menu2.css' %}" rel="stylesheet"&gt;
      &lt;link href="{% static 'mutech/css/project_dropdown_menu1.css' %}" rel="stylesheet"&gt;
      &lt;style type="text/css"&gt;
    .sidebar ul li {
      border-bottom: 1px solid #e7e7e7;
      border-right: 1px solid #e7e7e7;
      width: 
  }
           .slidebar_a, .slidebar_a:hover, .slidebar_a:focus, .slidebar_a:active, .slidebar_a:active 
              {
              background-color: white ;
              color:#337AB7;
              }
           #project_dropdown_col
              {
              background-color:white;
              }    
          .midDiv_project
              {
              min-height:580px;
              padding-top:  8.2%;
              }
      &lt;/style&gt;
  &lt;/head&gt; 
  &lt;body&gt;
  
      &lt;div id="wrapper" class="midDiv_project"&gt;
  
          &lt;!-- Navigation --&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
              &lt;div class="row" style="background-color:#AEAEAE;"&gt;
                &lt;div class="col-md-3" style="background-color:hsl(0, 0%, 97%);min-height:580px;margin-lef:-100px;width:21%;border-right: 1px solid #e7e7e7;"&gt;
                    &lt;div class="navbar-default sidebar" role="navigation" &gt;
              &lt;div class="sidebar-nav navbar-collapse"&gt;
                  &lt;ul class="nav" id="side-menu"&gt;
                      &lt;li&gt;
                          &lt;a href="/mutech/aboutus/" class="slidebar_a"&gt;&lt;i class="fa fa-dashboard fa-fw"&gt;&lt;/i&gt; Dashboard&lt;/a&gt;
                      &lt;/li&gt;
                                        &lt;!-- Sidebar --&gt;
  
  {% if branch_list %}
      {% for q in branch_list %}
  
              &lt;li&gt;
                  &lt;a href="#" class="slidebar_a"&gt;&lt;i class="fa fa-table fa-fw"&gt;&lt;/i&gt; {{ q.branch_title }}    
                      {# hello #}
  {% for p in subbranch_list %}
          {% if q.id == p.parentbranch_id  %}
                       &lt;span class="fa arrow"&gt;&lt;/span&gt;&lt;/a&gt; 
  
              {{ break }}
          {% endif %}             
  {% endfor %} 
                      {% for p1 in subbranch_list %}
                      &lt;ul class="nav nav-second-level"&gt;
                          {% if q.id == p1.parentbranch_id  %}
                                  &lt;li&gt;&lt;a href="#" class="slidebar_a"&gt;{{ p1.subbranch_title }}&lt;/a&gt;&lt;/li&gt;
                          {% endif %} 
                      &lt;/ul&gt;
                      {% endfor %}                
  
              &lt;/li&gt;
      {% endfor %}  
  {% endif %}     
                  &lt;/ul&gt;
              &lt;/div&gt;
                  &lt;!-- /.sidebar-collapse --&gt;
          &lt;/div&gt;
          &lt;!-- /.navbar-static-side --&gt;
  
                &lt;/div&gt;
                  &lt;div class="col-md-9" &gt;
                      &lt;div&gt;
  
                          &lt;div class="container" &gt;
                          &lt;div class="row"&gt;
                              &lt;h2&gt;Projects List&lt;/h2&gt;
  
              {% if project_list %}
                {% for q in project_list %}
                  &lt;div class="col-md-3" style="border:1px solid blak;height:250px;margin:2%"&gt;
                      &lt;a data-toggle="modal" href="#{{ q.project_title }}"&gt;
                      &lt;img class="img-responsive img-hover" src="../../../media/{{q.project_image}}" alt="Error" style="height:70%; width:100%" /&gt;&lt;/a&gt;&lt;br&gt;
                      &lt;center&gt;&lt;p&gt;{{ q.project_title }}&lt;/p&gt;&lt;/center&gt;&lt;br&gt;
                  &lt;/div&gt;
              {% endfor %}
              {% else %}
              &lt;p&gt;No Project Found&lt;/p&gt;
            {% endif %}               
  
  
      &lt;/div&gt;
   &lt;/div&gt;
  
  
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- /#page-wrapper --&gt;
  
           &lt;!-- jQuery --&gt;
      &lt;script src="{% static 'mutech/js/jquery.min.js' %}"&gt;&lt;/script&gt;
      &lt;!-- Bootstrap Core JavaScript --&gt;
      &lt;script src="{% static 'mutech/js/bootstrap.min.js' %}"&gt;&lt;/script&gt;
      &lt;!-- Metis Menu Plugin JavaScript --&gt;
      &lt;script src="{% static 'mutech/js/metisMenu.min.js' %}"&gt;&lt;/script&gt;
      &lt;!-- Custom Theme JavaScript --&gt;
      &lt;script src="{% static 'mutech/js/sb-admin-2.js' %}"&gt;&lt;/script&gt;
  
  
  
  
  
  
  &lt;div&gt;{% include "mutech/footer.html" %}&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>My view.py file is-</strong></p>
  
  <pre><code>def project_info(request):
      project_list = project.objects.all()
      branch_list = branch.objects.all()
      subbranch_list = subbranch.objects.all()
      context = {'branch_list':branch_list , 'subbranch_list':subbranch_list ,'project_list':project_list }
      return render(request, 'mutech/project.html', context)
  </code></pre>