My HTML includes Django template tags for different pills, each with its own content.
How can I make the corresponding CONTENT appear when clicking on each NAV-PILL?
NAV-PILLS
<div class="container-fluid bg-dark">
<div class="container text-center">
<ul class="nav nav-pills center-pills">
{% for menu in menus %}
{% if menu.mealtype == 'Breakfast' %}
<li role="presentation" class="active"><a href="#">Breakfast</a></li>
{% endif %}
{% if menu.mealtype == 'Lunch' %}
<li role="presentation"><a href="#">Lunch</a></li>
{% endif %}
{% if menu.mealtype == 'Dinner' %}
<li role="presentation"><a href="#">Dinner</a></li>
{% endif %}
{% if menu.mealtype == 'Supper' %}
<li role="presentation"><a href="#">Supper</a></li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
CONTENT
{% for menu in menus %}
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-capitalize">{{ menu.title }}</h2>
<hr class= "primary">
</div>
</div>
</div>
<div class="container">
<div class="row">
{% for item in menu.menuitem_set.all %}
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<h4>{{ item.item_name }} <strong>{% if item.price %}${{ item.price|floatformat:2 }}{% endif %}</strong><span><p class="text-muted text-muted-psize"><em>{{ item.description }}</em></p></h4>
</div>
</div>
{% cycle '' '' '' '</div><div class="row">'%}
{% endfor %}
</div>
</div>
</section>
{% endfor %}