In my current project in vscode, I am using Bootstrap 5 to develop a website. Specifically, I am working on creating an accordion feature with Bootstrap 5. However, I encountered an issue where the accordion body does not show up when clicking on the accordion. You can see what it looks like currently https://i.sstatic.net/mOB71.jpg. The code snippet for the accordion section can be found in the FAQ SECTION of the code (search 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: </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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2a4845455e595e584b5a6a1f0419041a">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0929f9f848384829180b0c5dec3dec0">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<script src="/_bridgetown/static/js/main.96ffffaea92690057bfb.js" defer></script>
...
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;
}