I am trying to create a navbar and sidenav from materialize css in django. Created three main html files with the name of mbase.html, navbar.html and sidenav.html. below are the codes respectively.
mbase.html:
{%load materializecss %}
{% load static %}
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--custom css for materialize-->
<link rel="stylesheet" type="text/css" href= {% static 'css/style.css' %}>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--Title of the page goes here-->
<title>{% block title %}Hello World {% endblock title %}</title>
</head>
<body>
{% include 'navbar.html' %}
{% block body %}
{% endblock body %}
<!--Jquery optional-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript" src={% static 'js/main.js' %}></script>
</body>
</html>
navbar.html:
{% load static %}
<nav>
<div class="nav-wrapper">
<i class="material-icons">menu</i>
CMMS
<ul class="right hide-on-med-and-down">
<!-- Dropdown Trigger for userprofile -->
{% if request.user.is_authenticated %}
<li><a id="userdropdown" class="dropdown-trigger" href="#!" data-target="dropdown2" >Hello, {{ request.user.email }}<i
class="material-icons right">arrow_drop_down</i></a></li>
{% else %}
<li>Login</li> | <li>Registration</li>
{% endif %}
<li>Company</li>
<li>About Us</li>
<!-- Dropdown Trigger for links dept wise -->
<li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Department<i
class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
<ul id="dropdown1" class="dropdown-content">
<li>E&M</li>
<li>Finance</li>
<li class="divider"></li>
<li>Personnel</li>
</ul>
<ul id="dropdown2" class="dropdown-content">
<li>Logout</li>
</ul>
</nav>
{% include 'sidenav.html' %}
sidenav.html:
<ul id="slide-out" class="sidenav">
<li><div class="user-view">
<div class="background">
<img src="images/office.jpg">
</div>
<img class="circle" src="images/yuna.jpg">
<span class="white-text name">John Doe</span>
<span class="white-text email">jdandturk#gmail.com</span>
</div></li>
<li><i class="material-icons">cloud</i>First Link With Icon</li>
<li>Second Link</li>
<li><div class="divider"></div></li>
<li><a class="subheader">Subheader</a></li>
<li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>
and in the main.js:
$(document).ready(function(){
$('.sidenav').sidenav();
// Initialize materialize data picker
$('.datepicker').datepicker({'format': 'yyyy-mm-dd'});
$('select').formSelect();
// other functions to make it collapsible
$('.collapsible').collapsible();
$(".dropdown-trigger").dropdown();
$("#userdropdown.dropdown-trigger").dropdown({coverTrigger: false});
});
Please help me i don't know why sidenav bar is not working.
while inspect in browser it show like. while pressing the sidenav menu its not expand.
use the following code in the beginning of your sidenav HTML template:
{% extends 'mbase.html' %}
Your CDN is not importing to your nav HTML file so this code will help you inherit the page
Related
I know this is a very common issue; however, this one is peculiar. When I use just the regular CSS style sheets (so without style.css), everything works fine, but as soon as I input in main.css, the dropdown stops working. I have no idea which specific part of the CSS is throwing off the dropdown so I am asking for help. I am using Django templates and if I include the style.css on just the home.html page then the dropdown only doesn't work there. I want to try and keep the FlexStart template so I would appreciate the help.
base.html
{% load static i18n %}<!DOCTYPE html>
{% get_current_language as LANGUAGE_CODE %}
{% load bootstrap_icons %}
<html lang="{{ LANGUAGE_CODE }}">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{% block title %}Semiconnect{% endblock title %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Behold My Awesome Project!">
<meta name="author" content="Dilreet Raju">
<link rel="icon" href="{%static 'images/favicons/favicon-32x32.png' %}">
{% block css %}
{% load static %}
<!-- Latest compiled and minified Bootstrap CSS -->
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" integrity="sha512-GQGU0fMMi238uA+a/bdWJfpUGKUkBdgfFdgBm72SUQ6BeyWjoY/ton0tEjH+OSH9iP4Dfh+7HM0I9f5eR0L/4w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Your stuff: Third-party CSS libraries go here -->
<!-- This file stores project-specific CSS -->
<link href="{% static 'css/project.css' %}" rel="stylesheet">
<link href="{% static 'css/carousel.css'%}" rel="stylesheet">
<link href="{% static 'css/style.css'%}" rel="stylesheet">
{% endblock %}
<!-- Le javascript
================================================== -->
{# Placed at the top of the document so pages load faster with defer #}
{% block javascript %}
<!-- Bootstrap JS -->
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js" integrity="sha512-OvBgP9A2JBgiRad/mM36mkzXSXaJE9BEIENnVEmeZdITvwT09xnxLtT4twkCa8m/loMbPHsvPl0T8lRGVBwjlQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Your stuff: Third-party javascript libraries go here -->
<!-- place project specific Javascript in this file -->
<script defer src="{% static 'js/project.js' %}"></script>
{% endblock javascript %}
</head>
<body class="pt-0 pb-0 mb-0">
<header class="pt-0 pb-0">
<nav class="navbar navbar-expand-md navbar-light pl-3 bg-light">
<div class="container-fluid">
<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="{% url 'stackbase:home' %}"><h1 id='Titlefont'style='color:#4154F1'>Semi<span class="text-black" id='Titlefont'>Connect</h1></a>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav ">
<li class="nav-item active">
<a class="nav-link" href="{% url 'stackbase:home' %}"><h6>Home</h6> <span class="visually-hidden">(current)</span></a>
</li>
</li>
{% if request.user.is_authenticated %}
<li class="nav-item ">
<a class="nav-link" href="{% url 'stackbase:question-create' %}"><h6>Ask A Question</h6></a>
</li>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'stackbase:question-lists' %}"><h6>View Questions</h6></a>
</li>
<li class="nav-item">
{# URL provided by django-allauth/account/urls.py #}
<a class="nav-link" href="{% url 'users:detail' request.user.username %}"><h6>{% translate "My Profile" %}</h6></a>
</li>
<li class="nav-item">
{# URL provided by django-allauth/account/urls.py #}
<a class="nav-link" href="{% url 'account_logout' %}"><h6>{% translate "Sign Out" %}</h6></a>
</li>
{% else %}
{% if ACCOUNT_ALLOW_REGISTRATION %}
<li class="nav-item">
{# URL provided by django-allauth/account/urls.py #}
<a id="sign-up-link" class="nav-link" href="{% url 'account_signup' %}"><h6>{% translate "Sign Up" %}</h6></a>
</li>
{% endif %}
<li class="nav-item">
{# URL provided by django-allauth/account/urls.py #}
<a id="log-in-link" class="nav-link" href="{% url 'account_login' %}"><h6>{% translate "Sign In" %}</h6></a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
{% if messages %}
{% for message in messages %}
<div class="alert alert-dismissible {% if message.tags %}alert-{{ message.tags }}{% endif %}">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
{% endif %}
</div> <!-- /container -->
{% block content %}
<p>Use this document as a way to quick start any new project.</p>
{% endblock content %}
{% block modal %}{% endblock modal %}
<!-- Footer -->
<!-- Footer -->
{%if not now%}
<footer class="text-center text-lg-start bg-light text-muted">
<!-- Section: Social media -->
<!-- Section: Social media -->
<!-- Section: Links -->
<section class="">
<div class="container text-center text-md-start mt-5 pt-4">
<!-- Grid row -->
<div class="row mt-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
<!-- Content -->
<h6 class="text-uppercase fw-bold mb-4">
<i class="fas fa-gem me-3"></i>Semiconnect
</h6>
<p>
Learn the ropes as you ask questions from seniors who are happy to help.
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">
Useful links
</h6>
<p>
Back To Top
</p>
<p>
Ask A Question
</p>
<p>
View Questions
</p>
<p>
Sign Up
</p>
<p>
Sign In
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
<!-- Links -->
<h6 class="text-uppercase fw-bold mb-4">Contact</h6>
<p><i class="fas fa-home me-3"></i> Surrey, BC, 13153 64 ave</p>
<p>
<i class="fas fa-envelope me-3"></i>
dilreetraju#gmail.com
</p>
<p><i class="fas fa-phone me-3"></i> + 01 778 807 0609</p>
<p><i class="fas fa-print me-3"></i> + 01 604 356 3123</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</section>
<!-- Section: Links -->
<!-- Copyright -->
<div class="text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
© 2022 Copyright: Semiconnect
</div>
<!-- Copyright -->
</footer>
{%endif%}
<!-- Footer -->
{% block inline_javascript %}
{% comment %}
Script tags with only code, no src (defer by default). To run
with a "defer" so that you run inline code:
<script>
window.addEventListener('DOMContentLoaded', () => {/* Run whatever you want */});
</script>
{% endcomment %}
{% endblock inline_javascript %}
</body>
</html>
I cannot include the CSS file in the post but here is the paste bin link. https://pastebin.com/G5G0pcM1 I appreciate the support.
I have two page templates and a CSS file in static directory.
This is my main.html where CSS works just fine:
{% load static %}
<html>
<head>
<title> </title>
<link rel ="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<nav>
<ul>
<li><img src="{% static 'images/logo.jpg'%}" height="49px" width="100px" >
<li><a href=#> HOME</a></li>
<li><a href=#> ABOUT</a></li>
<li> RENT</li>
<li> SALES</li>
</ul>
</nav>
{% block content %}
{% endblock %}
</body>
<hr>
<footer>
This is my index.html where CSS does not work:
{% extends 'main.html' %}
{% block content %}
<div id="showcase">
<div class="section-main container" >
<h1>House rent & Sale</h1>
<p class="lead hide-on-small">This is a web application </p>
</div>
</div>
{% endblock%}
How can I solve this?
Move your {% block content %}to above the header in main.html
Problem: CMS-toolbar is hiding Navigation bar menus & it's now disabled(not moving up).
Django version = 3.0.8
Django cms = 3.8.0
I have base template and a home template. Here I am sharing base template code. What should I add to solve the issue?
<!-- this is base template -->
{% load static %}
{% load cms_tags menu_tags sekizai_tags static %} <!--load template libraries of Sekizai and CMS tag -->
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}"> <!-- in case you want other languages -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=""> {% page_attribute "meta_description" %} <!--should have description of pages-->
<meta name="author" content="">
<title>Smart Learn - {% page_attribute "page_title" %} </title> <!--In title page name should come first then website title -->
{% render_block "css" %} <!-- loading css here render_block comes with sekizai lib to allow templates to included-->
<!-- Bootstrap core CSS -->
{% addtoblock "css" %} <!--for sekizai tags -->
<link href="{% static "vendor/bootstrap/css/bootstrap.min.css" %}" rel="stylesheet">
{% endaddtoblock %}
<!-- Custom styles for this template -->
{% addtoblock "css" %}
<link href="{% static "css/smart-learn.css" %}" rel="stylesheet">
{% endaddtoblock %}
</head>
{% cms_toolbar %}<!-- from cms toobar -->
<body>
<!-- Navigation -->
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="/">Smart Learn</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
{% show_menu 0 100 100 100 %} <!-- for cms menu -->
<li class="nav-item">
<a class="#" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="#" href="services.html">Services</a>
</li>
</ul>
</div>
</div>
</nav>
{% block content %}{% endblock %}
<!-- Footer -->
<footer class="py-5 bg-dark">
{% static_placeholder "Footer" %}
</footer>
<!-- Bootstrap core JavaScript -->
{% addtoblock "js" %}
<script src= "{% static "vendor/jquery/jquery.min.js" %}"></script>
{% endaddtoblock %}
{% addtoblock "js" %}
<script src= "{% static "vendor/bootstrap/js/bootstrap.bundle.min.js" %}"></script>
{% endaddtoblock %}
{% render_block "js" %} <!--to put all js template designs on home -->
</body>
</html>
How can I convert that icon to arrow one which can be moved up and down easily?
This is what I have
This is what I need
Do you have any placeholder tag inside template?
{% block base_content %}
{% placeholder some_content %}
{% endblock %}
If not, navigation bar will be disabled.
I am learning Django by building an application, called TravelBuddies. It will allow travelers to plan their trip and keep associated travel items (such as bookings, tickets, copy of passport, insurance information, etc), as well as create alerts for daily activities. The application will also able to update local information such as weather or daily news to the traveler. Travelers can also share the travel information with someone or have someone to collaborate with them to plan for the trip.
I am facing a problem. There is extra space at the top and bottom of the navigation bar.
How can I remove this extra white space on top and bottom of the navigation bar? I tried modifying the style codes. But I haven't managed to fix the issue.
Here are my codes in triplist.html:
<!DOCTYPE html>
{% extends 'base.html' %}
{% load static %}
<html lang="en">
<link rel="stylesheet" type="text/css" href="{% static "css/style.css" %}">
<head>
<meta charset="UTF-8">
{% block title%}Trip list{% endblock %}
<title>Trip list</title>
</head>
<body>
{% block content %}
<!--Page content-->
<h1>Upcoming Trips</h1><br>
<ol>
{% for trip in all_trips %}
<li>Trip name: {{ trip.trip_name }}</li>
<b>Date:</b> {{ trip.date }}<br>
<b>Planner:</b> {{ trip.planner_name }}<br>
<b>Coplanners:</b>
{% for user in trip.add_coplanner.all %}
{% if forloop.last %}
{{user.username}}
{% else %}
{{user.username}},
{% endif %}
{% endfor %}<br>
<b>Trip Description:</b> {{ trip.trip_description }}<br><br>
<!-- Co-planner: {{ trip.add_coplanner.all }}<br>-->
{% endfor %}
</ol>
<!-- <img src="{% static "images/botanical-garden.jpg" %}" alt="Botanical Garden" />-->
<!-- New line -->
{% endblock %}
</body>
</html>
Here are my codes in base.html:
<!--Result Size: 1392 x 239-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>{% block title %}
{% endblock %}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #f2f2f2;
padding: 25px;
}
</style>
</head>
<body>
<!--Logged in-->
<!--Left side-->
{% if user.is_authenticated %}
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'trips:triplist' %}">TravelBuddies</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Trip List</li>
<li>Add Trip</li>
<li>Add Activity</li>
<!--
<li>Contact</li>
-->
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
{{ request.user.username }}
</a>
</li>
<li><span class="glyphicon glyphicon-log-in"></span> Logout</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron">
<div class="container text-left">
{% else %}
<!--Not Logged in-->
<!--Left side-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="{% url 'trips:triplist' %}">TravelBuddies</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Trip List</li>
<!--
<li>Contact</li>
-->
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-plus-sign"></span> Register </li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
{% endif %}
<div class="jumbotron">
<div class="container text-left">
{% block content %}
{% endblock %}
</div>
</div>
</div>
</div>
</body>
How can I fix this issue?
In your base html keep the main tags which is required for a template as shown below:
{% load static %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico">
<title>Starter Template for Bootstrap</title>
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/starter-template/">
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet">
</head>
<body>
{% block content %}
{% endblock %}
</body>
And in other templates you don't have to use html tags or body tags because you are inheriting those from base.html
{% extends 'base.html' %}
{% block content %}
Your html code goes here
{% endblock %}
Your triplist.html should be like this:
{% block content %}
<!--Page content-->
<h1>Upcoming Trips</h1><br>
<ol>
{% for trip in all_trips %}
<li>Trip name: {{ trip.trip_name }}</li>
<b>Date:</b> {{ trip.date }}<br>
<b>Planner:</b> {{ trip.planner_name }}<br>
<b>Coplanners:</b>
{% for user in trip.add_coplanner.all %}
{% if forloop.last %}
{{user.username}}
{% else %}
{{user.username}},
{% endif %}
{% endfor %}<br>
<b>Trip Description:</b> {{ trip.trip_description }}<br><br>
<!--Co-planner: {{ trip.add_coplanner.all }}<br>-->
{% endfor %}
</ol>
<!--<img src="{% static "images/botanical-garden.jpg" %}" alt="Botanical Garden" />-->
<!-- New line -->
{% endblock %}
I am writing code for a animated hamburger icon for the bootstrap navbar, but need to toggle both the hamburger icon and the bootstrap repsonsive navbar. So is there some code or some way to toggle both pieces of data at different ids. Also, I can't use javascript because the bootstrap navbar doesn't have the sliding animation when toggling it through javascript.
Here is the code I have already for targeting the navbar collapse feature.
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="\static\base\css\hamburgers.css" rel="stylesheet">
<link href="\static\base\css\navbar.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<button class="hamburger hamburger--squeeze" height="15" id="hamburger" data-target="#collapsibleNavbar" data-toggle="collapse">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<a class=" navfont navbar-brand mx-auto" href="/account">Gucci Enterprises</a>
<div class="navshow">
{% if user.is_authenticated %}
Logout
{% else %}
<a href="/account/login" class="navfont important" >Login</a>
{% endif %}
</div>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<div class="container">
<div style="text-align: center">
{% if user.is_authenticated %}
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link navfont" href="/account/profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link navfont" href="/account/profile/edit">Edit Profile</a>
</li>
<li class="nav-item">
<a class="nav-link navfont" href="/account/change-password">Change Password</a>
</li>
</ul>
{% else %}
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link navfont" href="/account/register">Register</a>
</li>
<li class="nav-item">
<a class="nav-link navfont" href="/account/reset-password">Reset Password</a>
</li>
</ul>
{% endif %}
</div>
</div>
</div>
<div class="navhide">
{% if user.is_authenticated %}
Logout
{% else %}
Login
{% endif %}
</div>
</nav>
<br>
{% block body %}
{% endblock %}
</body>
</html>
'''
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<button class="btn btn-primary" data-toggle="collapse" data-target=".it-works">It Works</button>
<div class="collapse it-works">Yep.</div>
<div class="collapse it-works">It works.</div>
Add a class like .multi-collapse on the elements that should toggle and use data-target=".multi-collapse" with a class instead of an id. The bootstrap collapse component multiple targets documentation says you can reference them using a JQuery selector and includes a working example.