django and html rendering with nav-pills

I've this html with some django template tags. Each pill will have it's own content.

How do I get the each's corresponding CONTENT to show once I click on each NAV-PILLS?

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 %}

Answers


I would try this out:

<div class="container-fluid bg-dark">
    <div class="container text-center">

        <div role="tabpanel">
            <ul class="nav nav-pills center-pills">
                <li role="presentation" class="active">
                    <a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">Breakfast</a>
                </li>
                <li role="presentation">
                    <a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">Lunch</a>
                </li>
                <li role="presentation">
                    <a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">Dinner</a>
                </li>
                <li role="presentation">
                    <a href="#tab4" aria-controls="tab4" role="tab" data-toggle="tab">Supper</a>
                </li>
            </ul>
        </div>

        <div class="tab-content">

            <div role="tabpanel" class="tab-pane fade in active" id="tab1">
                <div class="panel panel-jumbotron panel-default">
                    <div class="panel-body">
                        <!-- Insert content here per tab -->
                    </div>
                </div>
            </div>

            <div role="tabpanel" class="tab-pane fade" id="tab2">
                <div class="panel panel-jumbotron panel-default">
                    <div class="panel-body">
                        <!-- Insert content here per tab -->
                    </div>
                </div>  
            </div>

            <div role="tabpanel" class="tab-pane fade" id="tab3">
                <div class="panel panel-jumbotron panel-default">
                    <div class="panel-body">
                        <!-- Insert content here per tab -->
                    </div>
                </div>  
            </div>

            <div role="tabpanel" class="tab-pane fade" id="tab4">
                <div class="panel panel-jumbotron panel-default">
                    <div class="panel-body">
                        <!-- Insert content here per tab -->
                    </div>
                </div>  
            </div>

        </div>
    </div>
</div>

Need Your Help

Metaprogramming performance in Dart

dart operator-overloading metaprogramming vm-implementation dart2js

When using operator overloading in Dart, are the operating functions resolved at compile time, or at runtime, or something else?

Is there any program that obfuscates C# source code?

c# .net compiler-construction compact-framework obfuscation

Our requirement is being able to integrate our DLLs with ClickOnce. Dotfuscator does the obfuscation job nicely but the obfuscated DLLs cannot be deployed with ClickOnce on customer side. On our si...