What is causing the Bootstrap accordion to not display content when clicked on?

As a beginner in web development, I am currently working on my very first website. One issue I'm facing is with incorporating an accordion-style card in my webpage. Although it allows me to click on different titles, the collapsed ones fail to expand and show the descriptions inside. Any suggestions on what mistake I might be making and how to rectify it?

https://i.stack.imgur.com/FXwq0.png

<div class="col col-sm order-sm-first col-md">
        <div class="col">
            <h2>Corporate Leadership</h2>

            <div class="accordian">
                <div class="card">
                    <div class="card-header" role="tab" id="peterhead">
                        <h3 class="mb-0">
                            <a data-toggle="collapse" data-target="#peter">
                                Peter Pan <small>Chief Epicurious Officer</small>
                            </a>
                        </h3>
                    </div>
                    <div class="collapse show" id="peter" data-parent="#accordion">
                        <div class="card-body">
                            <p class="d-none d-sm-block">Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey
                                to the shores of America with the intention of giving their children the best future. His mother's
                                wizardy in the kitchen whipping up the tastiest dishes with whatever is available inexpensively at
                                the supermarket, was his first inspiration to create the fusion cuisines for which
                                <em>The Frying Pan</em> became well known. He brings his zeal for fusion cuisines to this restaurant,
                                pioneering cross-cultural culinary connections.</p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" role="tab" id="dannyhead">
                        <h3 class="mb-0">
                            <a class="collapsed" data-toggle="collapse" data-target="#danny">
                                Dhanasekaran Witherspoon <small>Chief Food Officer</small>
                            </a>
                        </h3>
                    </div>
                    <div class="collapse" id="danny" data-parent="#accordion">
                        <div class="card-body">
                            <p class="d-none d-sm-block">Our CFO, Danny, as he is affectionately referred to by his colleagues, comes from a long established
                                family tradition in farming and produce. His experiences growing up on a farm in the Australian outback
                                gave him great appreciation for varieties of food sources. As he puts it in his own words,
                                <em>Everything that runs, wins, and everything that stays, pays!</em></p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" role="tab" id="agumbehead">
                        <h3 class="mb-0">
                            <a class="collapsed" data-toggle="collapse" data-target="#agumbe">
                                Agumbe Tang <small>Chief Taste Officer</small>
                            </a>
                        </h3>
                    </div>
                    <div class="collapse" id="agumbe" data-parent="#accordion">
                        <div class="card-body">
                            <p class="d-none d-sm-block">Blessed with the most discerning gustatory sense, Agumbe, our CTO, personally ensures that every dish
                                that we serve meets his exacting tastes. Our chefs dread the tongue lashing that ensues if their
                                dish does not meet his exacting standards. He lives by his motto,
                                <em>You click only if you survive my lick.</p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header" role="tab" id="albertohead">
                        <h3 class="mb-0">
                            <a class="collapsed" data-toggle="collapse" data-target="#alberto">
                                Alberto Somayya <small>Executive Chef</small>
                            </a>
                        </h3>
                    </div>
                    <div class="collapse" id="alberto" data-parent="#accordion">
                        <div class="card-body">
                            <p class="d-none d-sm-block">Award-winning three-star Michelin chef with wide International experience having worked closely with
                                whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences.
                                He says, <em>Put together the cuisines from the two craziest cultures, and you get a winning hit! Amma Mia!</em></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
htmlcssbootstrap-4

Answer №1

There was a confusion in your classes, as they were not properly aligned with the headers and content they were supposed to represent.

Please review the following code:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Corporate Leadership</h2>
  <div id="accordion">
    <div class="card">
      <div class="card-header">
        <a class="btn" data-bs-toggle="collapse" href="#peter">
          <h3>Peter Pan <small>Chief Epicurious Officer</small></h3>
        </a>
      </div>
      <div id="peter" class="collapse show" data-bs-parent="#accordion">
        <div class="card-body">
          Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the shores of America with the intention of giving their children the best future. His mother's wizardy in the kitchen whipping up the tastiest dishes
          with whatever is available inexpensively at the supermarket, was his first inspiration to create the fusion cuisines for which The Frying Pan became well known. He brings his zeal for fusion cuisines to this restaurant, pioneering cross-cultural
          culinary connections.
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed btn" data-bs-toggle="collapse" href="#danny">
          <h3>Dhanasekaran Witherspoon <small>Chief Food Officer</small></h3>
        </a>
      </div>
      <div id="danny" class="collapse" data-bs-parent="#accordion">
        <div class="card-body">
          <p class="d-none d-sm-block">Our CFO, Danny, as he is affectionately referred to by his colleagues, comes from a long established family tradition in farming and produce. His experiences growing up on a farm in the Australian outback gave him great appreciation for varieties
            of food sources. As he puts it in his own words, <em>Everything that runs, wins, and everything that stays, pays!</em>
          </p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed btn" data-bs-toggle="collapse" href="#agumbe">
          <h3>Agumbe Tang <small>Chief Taste Officer</small></h3>
        </a>
      </div>
      <div id="agumbe" class="collapse" data-bs-parent="#accordion">
        <div class="card-body">
          <p class="d-none d-sm-block">Blessed with the most discerning gustatory sense, Agumbe, our CTO, personally ensures that every dish that we serve meets his exacting tastes. Our chefs dread the tongue lashing that ensues if their dish does not meet his exacting standards.
            He lives by his motto, <em>You click only if you survive my lick.</em>
          </p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <a class="collapsed btn" data-bs-toggle="collapse" href="#alberto">
          <h3>Alberto Somayya <small>Executive Chef</small></h3>
        </a>
      </div>
      <div id="alberto" class="collapse" data-bs-parent="#accordion">
        <div class="card-body">
          <p class="d-none d-sm-block">Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. He says, <em>Put together the cuisines from the two craziest cultures, and you get a winning hit! Amma Mia!</em>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vue-quill-editor causes lists to incorrectly display <br> tags when using Quill, resulting in unwanted formatting additions

My application relies on vue-quill-editor for users to create notes. Initially, when a user creates a list, it is saved correctly. For instance, the saved HTML may appear as follows: <div> Test: </div> <ol> <li> One </l ...

htmlvue.jsquill

Tips for handling null input values when saving to a database

<!DOCTYPE html> <html> <head> <title>Data</title> </head> <body> /* Enter your data here */ <form action="this.php" method="post"> <input type='text&a ...

phphtmlcssmysqldatabase

How do I resolve the issue of Python doubling (" ") to ("" "")?

Here is an example of the code I am using without the website included. from bs4 import BeautifulSoup import requests import csv import random as rd source = requests.get('http://example.com').text file = open('C:/xampp/htdocs/new-site/text ...

pythonhtmlpython-3.xbeautifulsoup

Utilizing Jquery and Ajax to create a dynamic dropdown selection feature based on dependencies from a JSON file

Could you assist with the code snippet below? I have a form where each dropdown list depends on the selection above it. Based on the user's selection, the appropriate data should display in the subsequent dropdown list. I am trying to make dropdown l ...

javascriptjqueryhtmlajaxdropdown

What steps can be taken to properly display dateTime values in a data table when working with JavaScript (VueJS) and PHP (Laravel)?

I am facing an issue where I am unable to save user inputted date-time values from a modal into a data table. Despite receiving a success message, the dateTime values are not being added to the table. My payload only displays the state and approval fields ...

javascriptphphtmlvue.jsdatetime

Align the inner div in the center of the outer div, even when the outer div does not

I'm attempting to make sure the tail of the speechbubble aligns with the center of the image, regardless of their respective heights. Essentially, I want the image to always be centered within the current height of the wrapper, similar to how the spee ...

htmlcss

``Text Aligns Perfectly in the Middle Horizontally, yet Shifts Slightly Off-C

Two rectangular divs were created, each measuring 60px wide and 150px tall with text inside. The goal was to align the text vertically within the rectangles, achieved by using transform: rotate(-90deg). The challenge arose when trying to center the vertic ...

htmlcss

What are the steps to incorporating ng2-dnd with a background-image?

I am currently utilizing the ng2-dnd module to enable sorting of a list. While the functionality for sorting and dragging is working smoothly, there's one issue - users can only drag by clicking on the text within my element. My goal is to allow user ...

htmlcssangular

An issue occurred when retrieving the input value during a (change) event within a nested *ngFor loop in Angular

Within my table, I have implemented a nested loop using the *ngFor directive: <tbody> <tr *ngFor="let dept of salesTarget; let i = index"> <td>{{dept.dept}}</td> <td *ngFor="let month of monthList; ...

htmlangular

What is the proper way to encode image URLs for use in CSS?

For the div element in my code, I want to allow users to input a URL that will be applied as a CSS background image, like this: background-image: url("/* user specified URL here*/") I'm concerned about security. How can I properly escape the URL to ...

cssurlescapingxss

What is the best way to keep an HTML element visible on the page while it remains within the boundaries of another HTML object?

On my webpage, I have a selection of reports available. Currently, there are 4 sizable buttons located on the right-hand side for viewing, adding, editing, or deleting a report. However, there have been complaints from users who find it inconvenient to scr ...

htmlscrollmovable

Never-ending accessible document available for download to test internet speed

For my download speed tester project, I am implementing a straightforward method. I download a large image file from the internet and check if it arrives within a reasonable time frame. The specific file I am using is sourced from here. However, I am conc ...

html

Achieve the hidden div scroll effect in React by initially hiding the div and then allowing

I am currently working on a web chat application using next.js. One of the features is an emoji picker button that, when clicked, displays a menu of emojis. The issue I am facing is that in order for the user to see the emoji menu, they have to scroll down ...

javascriptcssreactjsnext.js

Adjust text size based on device orientation changes

I'm struggling to dynamically change the font size based on screen orientation and width. How can I adjust the font size when switching between landscape and portrait mode? I attempted using an event listener, but it's not updating the font size. ...

htmlangularsassionic2

Mastering @media queries to dynamically alter widths in prop styled components

I have a unique component that utilizes an object with its props for styling. const CustomSection = ({ sectionDescription, }) => { return ( <Text {...sectionDescription} content={intl.formatMessage({ id: &apos ...

cssreactjs

Is it possible to incorporate a different website font into an email template?

Currently working on an email template and looking to match the font with my website. Is there a method to ensure my site's font carries over into the email template? Provided below is the HTML code: <!DOCTYPE html> <html> <head> ...

htmlcssfonts

Is it appropriate for HTML5 Web Workers to utilize CORS for cross-origin requests?

As I was creating a hosted API that relies on web workers, I encountered an intriguing issue. I am looking for feedback from the community to help me with this. Even though my server has the necessary CORS headers in place to serve the worker JS files and ...

javascripthtmlcorsweb-worker

Ways to Conceal <div> Tag

I need help with a prank .html page I'm creating for a friend. The idea is that when the user clicks a button, a surprise phrase pops up. I have managed to hide and unhide the phrase successfully using JavaScript. However, my issue is that when the pa ...

javascripthtmljquery

Using Bootstrap multiselect, you can easily control the display of a second menu based on the selection in the first menu

On my website, I am working with two menus. When I select Abon from the first menu, it should display all li elements under the Abon optgroup (Abon-1, Abon-2). If I uncheck block in the second menu, those elements should disappear. The code consists of Sel ...

javascriptjqueryhtmltwitter-bootstrap

Deciphering the Mysteries of HTTP Headers

I have been using various applications to evaluate the quality of my websites, and many of the improvements suggested relate to missing http headers. Some examples include Content-Security-Policy, Charset, etc... I decided to visit the Wikipedia page on ...

htmlhttp-headers