javascripthtmlcsssidebar
Why is my bootstrap sidebar not collapsing on button click?
I have written a web page using bootstrap. I have a side bar and I want the sidebar to collapse on button click ( Toggle Sidebar button). I have added a java script to enable the functionality but it isn't working.
tst.html
<!DOCTYPE html>
<html lang="english">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href='style.css'>
<title>Testing</title>
<!-- Bootstrap CSS CDN -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous"
>
<!-- Our Custom CSS -->
<link rel="stylesheet" href="style.css">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<nav class=" navbar navbar-expand-lg navbar-light fixed-top bg-light py-lg-0 " id="customNavbar">
<a class="navbar-brand" href="/">
<!-- Add logo -->
<img src={{url_for('static', filename='images/Healdoc_new_4.png')}} alt="logo">
</a>
<button class="navbar-toggle-collapsed d-block d-sm-block d-md-none" type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="true"
aria-label="Toggle navigation"
id="togglerButton">
<span class="line"></span>
<span class="line"></span>
<span class="line" style="margin-bottom: 0;"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/About">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Services
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="/Services/Profile">profile</a></li>
<li><a class="dropdown-item" href="#">Service 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="/Contact">Contact</a>
</li>
</ul>
</div>
<form class="lg-flex">
<button type="button" href="/signin" class="btn btn-custom">Sign In</button>
<button type="button" class="btn btn-custom">Sign Up</button>
</form>
</nav>
</div>
<div class="row">
<div class="col-md-2">
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Option 1</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
<a href="#">Option 1a</a>
</li>
<li>
<a href="#">Option 1b</a>
</li>
<li>
<a href="#">Option 1c</a>
</li>
</ul>
</li>
<li>
<a href="#">Option 2</a>
</li>
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pages</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
<a href="#">Page-1</a>
</li>
<li>
<a href="#">Page-2</a>
</li>
<li>
<a href="#">Page-3</a>
</li>
</ul>
</li>
<li>
<a href="#">Option 3</a>
</li>
<li>
<a href="#">Option 4</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="col-md-10">
<div class="container-fluid">
<div id="content">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button type="button" id="sidebarCollapse" class="btn">
<i class="fas fa-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</nav>
</div>
</div>
<div class="container-fluid">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem est eius veritatis tempore, amet reiciendis! Blanditiis fugit fugiat nesciunt praesentium reprehenderit consectetur minus doloribus facilis explicabo fuga velit, magni minima?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia numquam doloremque aliquid rem aut dolor amet quia! Eligendi illum ut suscipit assumenda asperiores aperiam praesentium expedita, quas omnis commodi necessitatibus.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto, officia id ex natus architecto nesciunt ipsam. Natus, incidunt? Quibusdam quam minus, repellat magnam eos adipisci debitis minima possimus facere ab.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem est eius veritatis tempore, amet reiciendis! Blanditiis fugit fugiat nesciunt praesentium reprehenderit consectetur minus doloribus facilis explicabo fuga velit, magni minima?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia numquam doloremque aliquid rem aut dolor amet quia! Eligendi illum ut suscipit assumenda asperiores aperiam praesentium expedita, quas omnis commodi necessitatibus.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto, officia id ex natus architecto nesciunt ipsam. Natus, incidunt? Quibusdam quam minus, repellat magnam eos adipisci debitis minima possimus facere ab.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem est eius veritatis tempore, amet reiciendis! Blanditiis fugit fugiat nesciunt praesentium reprehenderit consectetur minus doloribus facilis explicabo fuga velit, magni minima?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia numquam doloremque aliquid rem aut dolor amet quia! Eligendi illum ut suscipit assumenda asperiores aperiam praesentium expedita, quas omnis commodi necessitatibus.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto, officia id ex natus architecto nesciunt ipsam. Natus, incidunt? Quibusdam quam minus, repellat magnam eos adipisci debitis minima possimus facere ab.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem est eius veritatis tempore, amet reiciendis! Blanditiis fugit fugiat nesciunt praesentium reprehenderit consectetur minus doloribus facilis explicabo fuga velit, magni minima?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia numquam doloremque aliquid rem aut dolor amet quia! Eligendi illum ut suscipit assumenda asperiores aperiam praesentium expedita, quas omnis commodi necessitatibus.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto, officia id ex natus architecto nesciunt ipsam. Natus, incidunt? Quibusdam quam minus, repellat magnam eos adipisci debitis minima possimus facere ab.
</p>
</div>
</div>
</div>
<!-- javascript to add navbar collapse functionality on button click -->
<script>
$(document).ready(function() {
$('#sidebarCollapse').click(function() {
$('#sidebar').toggleClass('active');
});
});
</script>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>
Css file might not be required but still I am providing below for reference.
style.css
#customNavbar .navbar-nav .nav-item .nav-link {
color: #4a438f;
font-weight: bold;
}
#customNavbar .btn-custom {
background-color: #4a438f;
color: #fff;
}
#customNavbar .navbar-toggler-icon {
color: #4a438f;
}
#togglerButton {
width: 47px;
height: 34px;
background-color: #4a438f;
border: none;
}
#togglerButton .line {
width: 100%;
float: left;
height: 2px;
background-color: #fff;
margin-bottom: 5px;
}
#customNavbar .dropdown-menu .dropdown-item {
color: #4a438f;
font-weight: bold;
}
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 230px;
min-height: 100vh;
}
#sidebar.active {
margin-left: -250px;
}
a[data-toggle="collapse"] {
position: relative;
}
#sidebar .dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
}
@media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
}
#sidebarCollapse {
background-color: #4a438f;
color: #fff;
}
body {
margin-top: 70px;
font-family: 'Poppins', sans-serif;
background: #fff;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #4a438f;
}
a,
a:hover,
a:focus {
text-decoration: none;
transition: all 0.3s;
}
#sidebar {
/* don't forget to add all the previously mentioned styles here too */
background: #e9ebf1;
color: #fff;
transition: all 0.3s;
}
#sidebar .sidebar-header {
padding: 20px;
background: #4a438f;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #4a438f;
}
#sidebar ul p {
color: #fff;
padding: 10px;
font-weight: bold;
background-color: #4a438f;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
color: #4a438f;
font-weight: bold;
}
#sidebar ul li a:hover {
color: #4a438f;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #4a438f;
background: #f7f6fa;
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #f7f6fa;
}
Solution
Place your code after the links to the jQuery/Bootstrap scripts, like so:
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<!-- javascript to add navbar collapse functionality on button click -->
<script>
$(document).ready(function() {
$('#sidebarCollapse').click(function() {
$('#sidebar').toggleClass('active');
});
});
</script>
- How can I find out if a javascript iterator terminates early?
- Renaming Function Parameters with Babel Without Changing Other Identical Identifiers
- How to find npm duplicate packages?
- Color gradient as style on marker
- How to fill the whole canvas with specific color?
- Change onclick action with a Javascript function
- Change onClick attribute with javascript
- JavaScript shuffle elements but track original index or use modulus to insert them into parent markup
- Parsing nested stringified json objects
- Gantt editable chart for ReactJs
- Pug is not correctly generating the HTML even with the correct pug indentation
- Chai/Node.js: Expect(value).to.be.NaN issue
- Why using toRef(props) and is it good idea to change their value in CompositionAPI?
- How to set document's title per page?
- How to rotate and fade background images in and out with javascript/ASP.NET/CSS
- Bootstrap collapse all accordions on button click
- Why does my Shadow DOM button (tabindex="0") get focus after the regular button (tabindex="10") and how can I fix it?
- Why do CDN links work for some versions but not others? NS_ERROR_CORRUPTED_CONTENT
- Creating a Blob from a base64 string in JavaScript
- How to add a watermark to a canvas that already has an image?
- How to detect ECMAscript version?
- Difference between useRef vs document.getElementById to focus an input
- Is it possible for an old-style class to inherit from an ECMAScript 6 class in JavaScript?
- How to update "updatedAt" manually?
- How to measure time taken by a function to execute
- How to have a link that has a product id in it
- Using ContextApi in SvelteKit in +page.server.ts
- Is it good practice to manipulate DOM in ReactJS?
- How to use Posthog to capture pageview events with React Router?
- PHP response triggers HEX view in Edge debugger