I tried to add navigation bar to my djagno site but it gives a error like "Reverse for 'about' not found. 'about' is not a valid view function or pattern name." I use this this answer to make this navigation bar [stack over flow answer][1] Please give me a another option to do this or help to debug this code .anyway here is my base.html full file
<!DOCTYPE html>
<html>
<head>
<title>Django Central</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700"
rel="stylesheet">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
</head>
<body>
...
{% block nav %}
<ul id="nav">
<li>{% block nav-home %}Home{% endblock %}</li>
<li>{% block nav-about %}About{% endblock %}</li>
<li>{% block nav-contact %}Contact{% endblock %}</li>
</ul>
{% endblock %}
...
<style>
body {
font-family: "Roboto", sans-serif;
font-size: 17px;
background-color: #fdfdfd;
}
.shadow{
box-shadow: 0 4px 2px -2px rgba(0,0,0,0.1);
}
.btn-danger {
color: #fff;
background-color: #f00000;
border-color: #dc281e;
}
.masthead {
background:#3398E1;
height: auto;
padding-bottom: 15px;
box-shadow: 0 16px 48px #E3E7EB;
padding-top: 10px;
}
</style>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow" id="mainNav">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'home' %}" >Django central</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">
<li class="nav-item text-black">
<a
class="nav-link text-black font-weight-bold"
href="#"
>About</a
>
</li>
<li class="nav-item text-black">
<a
class="nav-link text-black font-weight-bold"
href="#"
>Policy</a
>
</li>
<li class="nav-item text-black">
<a
class="nav-link text-black font-weight-bold"
href="#"
>Contact</a
>
</li>
</ul>
</div>
</div>
</div>
</nav>
{% block content %}
<!-- Content Goes here -->
{% endblock content %}
<!-- Footer -->
<footer class="py-3 bg-grey">
<p class="m-0 text-dark text-center ">Copyright © Django Central</p>
</footer>
</body>
</html>
Thanks,
Dinindu
Are you sure you have the name="about" parameter in your urlpattern?
that should look something like this
urlpatterns = [
path('about', views.about_view, name='about'),
]
Or if you are using CBVs
urlpatterns = [
path('about', views.AboutView.as_view(), name='about'),
]
In navbar page you have reffered to urlpatterns named 'home','about','contact'
<li>{% block nav-home %}Home{% endblock %}</li>
<li>{% block nav-about %}About{% endblock %}</li>
<li>{% block nav-contact %}Contact{% endblock %}</li>
Make sure you have a named url routes in your urlpatterns i.e:
path('about', views.aboutview, name='about'),
for all of these also declare corresponding views for all of them in your views.py file.
Related
Good afternoon everyone, I have some issues with Bootstrap. I would like to get two buttons "Log In" and "Sign Up" at the right of the page but they are still at the left while I mention class="text-end" which is supposed to align my buttons to the right. Anyone could have an idea, I am stuck.
<html>
<head>
<meta charset="utf-8">
<title>{% block title %}Newspaper App{% endblock title %}</title>
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container">
<header class="p-3 mb-3 border-bottom">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center
justify-content-lg-start">
<a class="navbar-brand" href="{% url 'home' %}">Newspaper</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
{% if user.is_authenticated %}
<li>+ New</li>
</ul>
<div class="dropdown text-end">
<a href="#" class="d-block link-dark text-decoration-none dropdown-toggle" id="dropdownUser1"
data-bs-toggle="dropdown" aria-expanded="false">
{{ user.username }}
</a>
<ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1">
<li><a class="dropdown-item" href="{% url 'password_change'%}">
Change password</a></li>
<li><a class="dropdown-item" href="{% url 'logout' %}">Log Out</a></li>
</ul>
</div>
{% else %}
<div class="text-end">
<a href="{% url 'login' %}" class="btn btn-outline-primary me-2">Log
In</a>
Sign Up
</div>
{% endif %}
</div>
</div>
</header>
<main>
{% block content %}
{% endblock content %}
</main>
</div>
<!-- Bootstrap JavaScript Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</body>
</html>[enter image description here](https://i.stack.imgur.com/19L7D.png)
I read the documentation, tried to reinstall some packages but I don't know what to do anymore.
Thanks in advance, have a nice week.
I'm new to django and I'm building a project "myblog" which has "blog" app in which I have created a base.html file which contain nav bar list of About and contact.I also created a "sendemail" app in same "myblog" project and I placed "email.html" contact file in templates directory of "sendemail" app, then what should be the href link in base.html file of "blog" app to access email.html file in "sendemail" app.
This is base.html file in blog app of templates directory.
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>Stand For Christ</title>
<link rel="stylesheet" href="{% static 'css/base.css' %}">
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700"
rel="stylesheet">
<meta name="google" content="notranslate" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
</head>
<body>
<style>
body {
font-family: "Roboto", sans-serif;
font-size: 17px;
background-color: #fdfdfd;
}
.shadow{
box-shadow: 0 4px 2px -2px rgba(0,0,0,0.1);
}
.btn-danger {
color: #fff;
background-color: #1d2671;
border-color: #1d2671;
}
.masthead {
background: #1d2671;
height: auto;
padding-bottom: 15px;
box-shadow: 0 16px 48px #E3E7EB;
padding-top: 10px;
}
</style>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow" id="mainNav">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'home' %}" style="color:#1d2671;font-size:25px" >Stand For Christ Ministries</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">
<li class="nav-item text-black">
<a
class="nav-link text-black font-weight-bold"
href="about.html"
>About</a>
</li>
<li class="nav-item text-black">
<a
class="nav-link text-black font-weight-bold"
href="#what should be the link here."
>Contact</a
>
</li>
</ul>
</div>
</div>
</div>
</nav>
{% block content %}
<!-- Content Goes here -->
{{ content | safe }}
{% endblock content %}
<!-- Footer -->
<footer class="py-3 bg-green">
<p class="m-0 text-dark text-center ">Copyright © Stand For Christ Ministries</p>
</footer>
</body>
</html>
This is urls.py file in "sendemail" app
# sendemail/urls.py
from django.contrib import admin
from django.urls import path
from .views import contactView, successView
urlpatterns = [
path('contact/', contactView, name='contact'),
path('success/', successView, name='success'),
]
This is views.py file of "sendemail" app
sendemail/views.py
from django.core.mail import send_mail, BadHeaderError
from django.http import HttpResponse, HttpResponseRedirect
from django.shortcuts import render, redirect
from .forms import ContactForm
def contactView(request):
if request.method == 'GET':
form = ContactForm()
else:
form = ContactForm(request.POST)
if form.is_valid():
subject = form.cleaned_data['subject']
from_email = form.cleaned_data['from_email']
message = form.cleaned_data['message']
try:
send_mail(subject, message, from_email, ['mahesh.usa16#gmail.com'])
except BadHeaderError:
return HttpResponse('Invalid header found.')
return redirect('success')
return render(request, "email.html", {'form': form})
def successView(request):
return HttpResponse('Success! Thank you for your message.')
please go to base.html file where contact nav bar link is there and read the comment there,what should be the link there?
In your "sendemail" app urls.py file add before urlpatterns
app_name = 'sendemail'
and then in base.html use
href="{% url 'sendemail:contact' %}"
Follow this to learn more: https://docs.djangoproject.com/en/3.1/topics/http/urls/#reversing-namespaced-urls
I want to see http://127.0.0.1:8000/bookmark/ page.
But I go there, there is an error in website.
error message is
NoReverseMatch at /bookmark/
Reverse for 'detail' not found. 'detail' is not a valid view function or pattern name.
Request Method: GET
Request URL: http://127.0.0.1:8000/bookmark/
Django Version: 3.1
Exception Type: NoReverseMatch
Exception Value:
Reverse for 'detail' not found. 'detail' is not a valid view function or pattern name.3
and my code is
[base.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}django web programming {% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- 하위 html 파일에서 이 부분에 style 태그를 추가할 가능성이 있으므로 block 태그를 기입. 블록태그이름은 extra-style로 지정함 변경가능 -->
{% block extra-style %}{% endblock %}
<style>
.nav-link{
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body style = "padding-top:90px;">
<!-- home.html (4) 참고 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<span class="navbar-brand mx-5 mb-0 font-weight-bold font-italic"> Motdongsan</span>
<!-- <a class="navbar-brand" href="#">Navbar</a> -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item mx-3 btn btn-light">
<a class="nav-link" href="{% url 'home'%}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item mx-3 btn btn-light">
<a class="nav-link" href="{% url 'bookmark:index'%}">Bookmark</a>
</li>
<li class="nav-item mx-3 btn btn-light">
<a class="nav-link" href="{% url 'blog:index'%}">blog</a>
</li>
<li class="nav-item mx-3 btn btn-light">
<a class="nav-link" href="{% url 'bookmark:index'%}">photo</a>
</li>
<li class="nav-item mx-3 btn btn-light">
<a class="nav-link" href="">Photo</a>
</li>
<li class="nav-item dropdown mx-3 btn btn-light">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Admin</a>
<a class="dropdown-item" href="#">Archive</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Search</a>
</div>
</li>
<li class="nav-item mx-3 btn ">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class ="form-inline my-2" action="" method="post"> {% csrf_token %}
<input class="form-control mr-sm-2" type="search" placeholder="global search" name="search_word">
</form>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- 본문 내용은 각 페이지마다 달라질수 있으므로 block 태그를 사용. 블록태그이름은 content -->
<div class="container bg-warning">
{% block content %}{% endblock %}
</div>
{% block footer %}{% endblock %}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/c998a172fe.js"></script>
{% block extra-script %}{% endblock %}
</body>
</html>
[bookmark_detail.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Django Bookmark Detail</title>
</head>
<body>
<div id ="content">
<h1>{{object.title}}</h1>
<ul>
<li>URL: {{object.url}}</li>
</ul>
</div>
</body>
</html>
[bookmark/views.py]
from django.shortcuts import render
# Create your views here.
from django.views.generic import ListView, DetailView
from bookmark.models import Bookmark
class BookmarkLV(ListView):
model = Bookmark
class BookmarkDV(DetailView):
model = Bookmark
[boorkmark/urls.py]
from django.urls import path
from bookmark.views import BookmarkLV, BookmarkDV
app_name= 'bookmark'
urlpatterns = [
path('', BookmarkLV.as_view(), name='index'),
path('<int:pk>/', BookmarkDV.as_view(), name='detail'),
]
what should I do? please help me...
and I don't know why I just want to go bookmark site, but error code says base.html has a problem
I just move on link(http://127.0.0.1:8000/bookmark/ page.), not button in base.html
+)
this is bookmark/models.py
from django.db import models
# Create your models here.
class Bookmark(models.Model):
title = models.CharField('TITLE', max_length =100, blank =True)
url = models.URLField('URL', unique=True)
# URL : admin사이트에서 보일것
def __str__(self):
return "%s %s" %(self.title, self.url)
# return self.title
this is bookmark_list.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% extends "base.html"%}
{% block title %}bookmark_list.html{% endblock %}
{% block content %}
</head>
<body>
<div id="content">
<h1> Bookmark List</h1>
<ul>
{%for bookmark in object_list%}
<li>{{bookmark}}</li>
{%endfor%}
</ul>
{% endblock %}
</div>
</body>
</html>
I think your problem is the way that you defined your url in your bookmark_list.html (the line <li>{{bookmark}}</li>). It's because you defined app_name in your urls and in this way you should change your template line to something like <li>{{bookmark}}</li>.
I am learning DJANGO and while proceeding wanted to give nice look to some pages. I am currently new in programming (only 4 months coding) and mostly spent time with Python, could find time to properly learn front-end.
So my problem is I can`t center LOGIN block in the page. I am using Bootstrap4.5 and gave some Shadow to make object like floating. I now there were similar questions here with answers and tons of tutorial of centering elements either with custom CSS or Bootstrap Flex or Justify and I really tried almost everything I found with no result. Every time time position of Block is getting somewhere else but not center.
My Base HTML:
<!DOCTYPE html>
{% load static %}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-
9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
<link rel="stylesheet" href="{% static 'css/base.css' %}">
<title>Newspaper Project</title>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="{% url 'home' %}">Newspaper</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarCollapse" aria-controls="navbarCollapse"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
{% if user.is_authenticated %}
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="#" id="userMenu"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
{{ user.username }}
</a>
<div class="dropdown-menu dropdown-menu-right"
aria-labelledby="userMenu">
<a class="dropdown-item" href="{% url 'password_change'%}">Change
password</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'logout' %}">Log Out</a>
</div>
</li>
</ul>
{% else %}
<form class="form-inline ml-auto">
Log In
Sign up
</form>
{% endif %}
</div>
</nav>
<div class="container">
{% block content %}
{% endblock %}
</div>
<!-- JAVASCRIPT BOOTSTRAP -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
My Login HTML:
{% extends "base.html" %}
{% load crispy_forms_tags %}
{% block content %}
{% if user.is_authenticated %}
<h2>You are already logged in!</h2>
Log Out
{% else %}
<form class="shadow-lg p-3 mb-5 bg-white rounded login" method="post">
{% csrf_token %}
{{ form|crispy }}
<button class="btn btn-success" type="submit">Log In</button>
</form>
{% endif %}
{% endblock %}
And attached image how the page is looking.
I really dont know what else I can try to center the login block. All I want is to center it below navbar in remaining space.
Thanks in advance!
You can use text-align attribute for this as following.
<div style="text-align:center"><form id="form_login"><!--form content here--></form></div>
This will center all the content inside the parent DIV. An optional way is to use margin: auto CSS attribute with predefined widths and heights. Please follow the following thread for more information.
Try this, by setting the position to absolute you're positioning your form relative to the outer container, so you can tweak the percentage left and top as you wish.
.div {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
}
<body>
<div class="div">
<h3> Hi, I'm just an example form 😊</h3>
<input><br>
<input><br>
<button>click me</button>
</div>
</body>
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.