Bootstrap accordion with Django: How to only load the data for the open accordion section?
<p>I'm trying to make a webpage that will display recipes in the format of a bootstrap accordion like so (<a href="https://i.stack.imgur.com/1QEbG.png" rel="nofollow">see here</a>).
This is how I'm doing it as of now:</p>

<pre><code>&lt;div class="panel-group" id="accordion"&gt;
    {% for recipe in recipes %}
    &lt;div class="panel panel-default"&gt;
        &lt;div class="panel-heading"&gt;
            &lt;h4 class="panel-title"&gt;
                &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapse{{ forloop.counter }}"&gt;
                    {{ recipe }}
                &lt;/a&gt;
            &lt;/h4&gt;
        &lt;/div&gt;
        &lt;div id="collapse{{ forloop.counter }}" class="panel-collapse collapse"&gt;
            &lt;div class="panel-body"&gt;
                &lt;table class="table table-hover"&gt;
                    {% for ingredient in  foodtype|ingredients_in_recipe:recipe %}
                        &lt;tr&gt;
                            &lt;td&gt;
                                {{ ingredient.ingredient_name }}
                            &lt;/td&gt;
                            &lt;td&gt;
                                {{ ingredient.ingredient_quantity }}
                            &lt;/td&gt;
                        &lt;/tr&gt;
                    {% endfor %}
                    &lt;p&gt;{{ recipe.details }}&lt;/p&gt;
                &lt;/table&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    {% endfor %}
&lt;/div&gt;
</code></pre>

<p>I have made a custom template tag for this like so:</p>

<pre><code>@register.filter
def ingredients_in_recipe(foodtype, recipe):
    return foodtype.ingredient_set.filter(recipe=recipe).order_by("ingredient_name")
</code></pre>

<p>The problem is that I have 200+ recipes and loading all this data is way too slow. Ideally the template tag function ingredients_in_recipe should only be called when the user clicks on the recipe. However from my understanding this isn't possible because Django runs it all then sends the rendered HTML to the user.</p>

<p>Is there anyway I could circumvent this issue whilst still keeping the accordion style like in the picture?</p>

<p>Thanks in advance,
Max</p>

<p><strong>EDIT:</strong> Here's my view as well</p>

<pre><code>def detail(request, foodtype_id):
     foodtype = get_object_or_404(foodtype, id=foodtype_id)
     recipe = foodtype.recipe_set.values_list('recipe').order_by('recipe').distinct()
     context = {
         'foodtype': foodtype,
         'recipe': recipe,
     }
     return render(request, 'main/detail.html', context)
</code></pre>

<p>Always better to do that logic before it gets to the template. What if you set the ordering on ingredients so then you won't have to order them in the template? Does that work and improve the performance?</p>

<pre><code>class Ingredient(models.Model):
  ...

  class Meta:
    ordering = ['ingredient_name']


&lt;div class="panel-group" id="accordion"&gt;
    {% for recipe in recipes %}
    &lt;div class="panel panel-default"&gt;
        &lt;div class="panel-heading"&gt;
            &lt;h4 class="panel-title"&gt;
                &lt;a data-toggle="collapse" data-parent="#accordion" href="#collapse{{ forloop.counter }}"&gt;
                    {{ recipe }}
                &lt;/a&gt;
            &lt;/h4&gt;
        &lt;/div&gt;
        &lt;div id="collapse{{ forloop.counter }}" class="panel-collapse collapse"&gt;
            &lt;div class="panel-body"&gt;
                &lt;table class="table table-hover"&gt;
                    {% for ingredient in recipe.ingredient_set.all %}
                        &lt;tr&gt;
                            &lt;td&gt;
                                {{ ingredient.ingredient_name }}
                            &lt;/td&gt;
                            &lt;td&gt;
                                {{ ingredient.ingredient_quantity }}
                            &lt;/td&gt;
                        &lt;/tr&gt;
                    {% endfor %}
                    &lt;p&gt;{{ recipe.details }}&lt;/p&gt;
                &lt;/table&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    {% endfor %}
&lt;/div&gt;
</code></pre>

python django twitter-bootstrap django-templates templatetags