Hide Elements within Jinja2 template? Any possible way to hide a button?

Question

I am working on my web application using Python and Flask. I have got a navbar and some buttons on it and I would like to hide one of buttons when I am not on the index page. Is that possible? I would like the button "select brand" to be visible only on index.html page.

{% block navbar %}

<nav class="navbar navbar-expand-lg navbar-default fixed-top ">
    <div class="container">

        <div class="navbar-header">
            <button button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" rel="home" href="{{ url_for('main.index') }}" title="Mobile phones and accessories">
                <img style="max-width:40px; margin-top: -9px;"
                     src="http://www.logospng.com/images/38/devfest-2016-38885.png" >
            </a>
        </div>

        <div id="navbar" class="collapse navbar-collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="{{ url_for('main.index') }}">Home</a></li>
                {% if current_user.is_authenticated and current_user.admin %}
                <li><a href="{{ url_for('phones.new_phone') }}">Add phone</a></li>
                <li><a href="{{ url_for('phones.brand') }}">Add brand</a></li>
                {% endif %}

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Select brand <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        {% for brand in brands %}
                        <li class="list-group-item">
                            <a href="{{ url_for('main.index', bra=brand) }}">{{ brand }}</a>
                         {% endfor %}


                    </ul>
                </li>
            </ul>
                        <ul class="nav navbar-nav navbar-right">
                {% if current_user.is_authenticated %}
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <span class="glyphicon glyphicon-user"> </span> {{ current_user.username }}
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                                <li><a href="{{ url_for('auth.logout') }}" >Logout</a></li>
                        </ul>
                    </li>
                {% else %}
                    <li><a class="nav-link" href="{{ url_for('auth.login') }}" >Login</a></li>
                    <li><a class="nav-link" href="{{ url_for('auth.register') }}" >Register</a></li>
                {% endif %}
            </ul>
                <form class="navbar-form navbar-right" method='POST' action="{{ url_for('phones.search') }}">
                <div class="form-group">
                    <input class="search-query form-control" placeholder="Search..." aria-label="Search" type="text" name="search">
                </div>
            </form>
        </div>

    </div>
</nav>
{% endblock %}

Answer 1

Create a new variable within your index route and pass that variable into the render_template method of said route. The presence of this variable will determine if the <button> or link within your <nav> should be rendered or not. Since the <nav> will be shared across all other layouts, its HTML code should be put within your base layout, or the layout which all other views are inheriting from.

Something along the lines of:

index route:

@app.route("/")
def index():
    # isIndex is the variable we will use to determine 
    # whether or not to render your navigation link or button
    return render_template('index.html', isIndex=True)

base layout file:

  <div class="navbar-nav">
      {% if isIndex %}
          <a class="nav-item nav-link" href="">linkOnlyForIndexPage</a>
       {% else %}
          <a class="nav-item nav-link" href="">link1</a>
          <a class="nav-item nav-link" href="">link2</a>
       {% endif %}
  </div>

This is exactly what you're already doing with {% if current_user.is_authenticated %} for your navigation links. The reason this works is because the index route is the only route which sets this variable, within your jinja2 templates, so all other routes which render corresponding views will default to false on this conditional check: {% if isIndex %}

Hopefully that helps!