I am in vscode and I am trying to create a website. I am also using Bootstrap 5 to help me create this website and I am trying to use Bootstrap 5 to create an accordion but when I click on the accordion there is no dropdown; the accordion body doesn’t show. This is what it currently looks like 
The accordion section of the code can be found in the FAQ SECTION of the code (look for the FAQ SECTION comment)
Index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Your awesome title: Technovine Solutions</title>
<meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/index.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="/_bridgetown/static/js/main.96ffffaea92690057bfb.js" defer></script>
<script type="module">let lastmod = 0
function startReloadConnection() {
const evtSource = new EventSource("/_bridgetown/live_reload")
evtSource.onmessage = event => {
if (event.data == "reloaded!") {
location.reload()
} else {
const newmod = Number(event.data)
if (lastmod > 0 && newmod > 0 && lastmod < newmod) {
location.reload()
} else {
lastmod = newmod
}
}
}
evtSource.onerror = event => {
if (evtSource.readyState === 2) {
// reconnect with new object
evtSource.close()
console.warn("Live reload: attempting to reconnect in 3 seconds...")
setTimeout(() => startReloadConnection(), 3000)
}
}
}
setTimeout(() => {
startReloadConnection()
}, 500)
</script>
</head>
<body>
<!-- NAVIGATION BAR START -->
<nav class="navbar navbar-expand-lg navbar-light bg-white py-3">
<div class="container">
<a href="index.html">
<img src="C:UsersNewMayoAyoDocuments_DevprojectsTechnovine-Bootstrapassetslogo-topnav.png" alt=" Technovine Solutions logo" height="45" width="225" class="img-fluid"/>
</a>
<!-- TOGGLE MENU START -->
<button
type="button"
class="navbar-toggler"
data-bs-toggle="collapse"
data-bs-target="#navmenu"
>
<span class="navbar-toggler-icon">
</button>
<!-- TOGGLE MENU CLOSE -->
<!-- TOGGLE MENU START -->
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item"><a href="#" class="nav-link">Services</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
</ul>
</div>
<!-- TOGGLE MENU CLOSE -->
</div>
</nav>
<!-- NAVIGATION BAR CLOSE -->
<!-- SHOWCASE START -->
<section class="bg-dark text-white text-center text-sm-start p-5 p-lg-0">
<div class="container">
<div class="d-flex align-items-center justify-content-center">
<div>
<h1><span class="text-primary">Technovine Solutions</span></h1>
<p class="lead py-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem.
</p>
<button type="button" class="btn btn-primary">Get Quote</button>
</div>
<img src="technovine-logo" alt="Technovine Solutions logo" class="img-fluid d-none d-lg block"/>
</div>
</section>
<!-- SHOWCASE CLOSE -->
<!-- FEATURE SECTION START -->
<section>
<div class="container">
<div class="row bg-white mt-5 px-2">
<div class="col-lg-6 col-sm-12">
<img src="technovine-logo" alt="Technovine Solutions logo" class="img-fluid"/>
</div>
<div class="col-lg-6 col-sm-12">
<h2 class="display-6">Get a Solution to all your IT Needs in One Place</h2>
<hr>
<p class="lead mt-5">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem.
</p>
<a href="#" class="btn btn-primary mt-3">Read More</a>
</div>
</div>
</div>
</section>
<!-- FEATURE SECTION CLOSE -->
<!-- TEAM SECTION START -->
<section>
<div class="container">
<div class="row bg-white pt-5 px-2">
<div class="col-lg-6 col-sm-12">
<h2 class="display-6">Our Team</h2>
<hr>
<p class="lead mt-5">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem.
</p>
<a href="#" class="btn btn-primary mt-3">Read More</a>
</div>
<div class="col-lg-6 col-sm-12">
<img src="technovine-logo" alt="Technovine Solutions logo" class="img-fluid"/>
</div>
</div>
</div>
</section>
<!-- TEAM SECTION CLOSE -->
<!-- USER DETAILS START -->
<section>
<div class="container">
<div class="row text-center pt-4">
<div class="col-lg-3 col-md-6">
<i class="fas fa-user fa-3x"></i>
<h2 class="display-6">100</h2>
<p class="text-muted">Active Clients</p>
</div>
<div class="col-lg-3 col-md-6">
<i class="fa-brands fa-windows fa-3x"></i>
<h2 class="display-6">500</h2>
<p class="text-muted">Positive Reviews</p>
</div>
<div class="col-lg-3 col-md-6">
<i class="fa-brands fa-windows fa-3x"></i>
<h2 class="display-6">100</h2>
<p class="text-muted">Active Clients</p>
</div>
<div class="col-lg-3 col-md-6">
<i class="fa-brands fa-windows fa-3x"></i>
<h2 class="display-6">100</h2>
<p class="text-muted">Active Clients</p>
</div>
</div>
</div>
</div>
</section>
<!-- USER DETAILS CLOSE -->
<!-- WEBSITE SECTION START -->
<section>
<div class="container">
<div class="row bg-dark py-5 px-2 text-white">
<div class="col-lg-12 col-sm-12 text-center">
<p>2023 IT Leaders</p>
<h2>Get a Soltion to your Problems</h2>
<a href="#" class="btn btn-primary mt-3">Read More</a>
</div>
</div>
</div>
</section>
<!-- WEBSITE SECTION CLOSE -->
<!-- SERVICES SECTION START -->
<section>
<div class="container">
<div class="row py-5">
<h2 class="display-6 mb-4">Our Services</h2>
<!-- <div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2">
<i class="fas fa-camera fa-3x"></i>
<h4>CCTV Services</h4>
<p class="p-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
</p>
</div>
</div> -->
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fas fa-database fa-3x"></i>
<h4>Datacenter Support</h4>
<p class="p-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
</p>
</div>
</div>
<!-- <div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2">
<i class="fas fa-sign-hanging fa-3x"></i>
<h4>Digital Signage</h4>
<p class="p-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
</p>
</div>
</div> -->
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fas fa-headset fa-3x"></i>
<h4>General Support</h4>
<p class="p-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fas fa-server fa-3x"></i>
<h4>Network Support</h4>
<p class="p-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fas fa-cash-register fa-3x"></i>
<h4>POS Services</h4>
<p class="p-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fas fa-tower-cell fa-3x"></i>
<h4>Telecom Services</h4>
<p class="p-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
</p>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card text-center p-4 mb-2 crd">
<i class="fa-solid fa-bars fa-3x"></i>
<h4>Additional Services</h4>
<p class="p-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
voluptatum, voluptate, quibusdam, quia voluptas quod quos
exercitationem quae voluptatibus doloribus quidem. Quisquam
</p>
</div>
</div>
</div>
</div>
</section>
<!-- SERVICES SECTION CLOSE -->
<!-- FAQ SECTION START -->
<section>
<div class="container">
<div class="row py-2">
<h2 class="display-6">Freqently Asked Questions</h2>
<div class="col-lg-6 col-md-6 text-center">
<div class="accordion accordion-flush" id="accordionflush">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-CollapseOne"
>
Nulla do magna aliquip elit culpa.
</button>
</h2>
<div
id="#flush-CollapseOne"
class="accordion-collapse collapse"
data-bs-parent="#accordionflush"
>
<div class="accordion-body">
Elit elit irure ad deserunt. Ipsum aliquip amet amet sit duis excepteur. Sit commodo duis aliqua amet. Deserunt Lorem nulla ut pariatur id eiusmod aliqua est nostrud Lorem et nostrud nostrud.
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 text-center">
<img src="./assets/logo-topnav.png" alt="" class="img fluid" />
</div>
</div>
</div>
</section>
<!-- FAQ SECTION CLOSE -->
</body>
</html>
Index.css
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
background: #f1f2fa;
font-family: 'Poppins', sans-serif;
}
hr {
border: 1.5px solid #0b5ed7
}
.crd {
background-color: #f1f2fa;
transition: all;
}
.crd:hover {
background: #0b5ed7;
color: #fff;
transition: 0.5s;
}
2
Answers
#is used for ID selector in cssYou have not added data-bs-parent and aria-labelledby attributes