Trouble with Unveiling the Secondary Accordion

I am having issues adding a second accordion next to the existing one. Even though the code is working fine in the tryit editor v3.6 online, it doesn't seem to display correctly for me. I have made sure that I am using the latest versions of all scripts, except for Bootstrap 5 beta which I replaced with version 4.5.

PS: Stackoverflow requires additional text before allowing the post, so here is some placeholder text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor augue mauris, ac vehicula lorem dignissim sit amet. Donec consectetur risus a placerat lobortis. Mauris posuere sapien ac arcu facilisis, non pellentesque diam semper. Etiam luctus vehicula dictum. Sed pellentesque augue eros, sed venenatis ex scelerisque a. Sed luctus tristique.

 <div class="container">
  <h1 class="text-center">Frequently Asked Questions</h1>
  <hr>
  <div class="row">
    <div class="col-md-6">
      <div id="accordion">
        <div class="card">
          <div class="card-header">
            <h5 class="mb-0">
              <a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">
                Question One
              </a>
            </h5>
          </div>

          <div id="collapseOne" class="collapse">
            <div class="card-body">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt ea officiis distinctio exercitationem dolor minus placeat
              amet commodi, ab a perspiciatis officia nobis reiciendis numquam totam repudiandae molestias nulla, quod
              voluptatibus modi rerum laboriosam tenetur. Nihil, soluta eaque? Minima, deserunt.
            </div>
          </div>
        </div>

        (additional accordion content)

      </div>
    </div>
  </div>
</div>
htmlcssbootstrap-4

Answer №1

I believe this information will be beneficial to you.

It seems that the issue lies with the identifier in your code snippet 

<div id="accordion2">
. I recommend checking the part just before "Question Four" in your Accordion. I attempted running your code after modifying the ID from "accordion2" to "accordion". 
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="385a57574c4b4c4a5948780c">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />

  <title>Accordion</title>
</head>

<body>
  <div class="container">
    <h1 class="text-center">Frequently Asked Questions</h1>
    <hr />
    <div class="row">
      <div class="col-md-6">
        <div id="accordion">
          <div class="card">
            <div class="card-header">
              <h5 class="mb-0">
                <a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">
                    Question One
                  </a>
              </h5>
            </div>

            <div id="collapseOne" class="collapse">
              <div class="card-body">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt ea officiis distinctio exercitationem dolor minus placeat amet commodi, ab a perspiciatis officia nobis reiciendis numquam totam repudiandae molestias nulla, quod voluptatibus modi rerum
                laboriosam tenetur. Nihil, soluta eaque? Minima, deserunt.
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header">
              <h5 class="mb-0">
                <a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">
                    Question Two
                  </a>
              </h5>
            </div>

            <div id="collapseTwo" class="collapse">
              <div class="card-body">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt ea officiis distinctio exercitationem dolor minus placeat amet commodi, ab a perspiciatis officia nobis reiciendis numquam totam repudiandae molestias nulla, quod voluptatibus modi rerum
                laboriosam tenetur. Nihil, soluta eaque? Minima, deserunt.
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header">
              <h5 class="mb-0">
                <a href="#collapseThree" data-toggle="collapse" data-parent="#accordion">
                    Question Three
                  </a>
              </h5>
            </div>

            <div id="collapseThree" class="collapse">
              <div class="card-body">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt ea officiis distinctio exercitationem dolor minus placeat amet commodi, ab a perspiciatis officia nobis reiciendis numquam totam repudiandae molestias nulla, quod voluptatibus modi rerum
                laboriosam tenetur. Nihil, soluta eaque? Minima, deserunt.
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card">
          <div class="card-header">
            <h5 class="mb-0">
              <a href="#collapseFour" data-toggle="collapse" data-parent="#accordion">
                  Question Four
                </a>
            </h5>
          </div>

          <div id="collapseFour" class="collapse">
            <div class="card-body">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt ea officiis distinctio exercitationem dolor minus placeat amet commodi, ab a perspiciatis officia nobis reiciendis numquam totam repudiandae molestias nulla, quod voluptatibus modi rerum
              laboriosam tenetur. Nihil, soluta eaque? Minima, deserunt.
            </div>
          </div>
        </div>

        <div class="card">
          <div class="card-header">
            <h5 class="mb-0">
              <a href="#collapseFive" data-toggle="collapse" data-parent="#accordion">
                  Question Five
                </a>
            </h5>
          </div>

          <div id="collapseFive" class="collapse">
            <div class="card-body">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt ea officiis distinctio exercitationem dolor minus placeat amet commodi, ab a perspiciatis officia nobis reiciendis numquam totam repudiandae molestias nulla, quod voluptatibus modi rerum
              laboriosam tenetur. Nihil, soluta eaque? Minima, deserunt.
            </div>
          </div>
        </div>

        <div class="card">
          <div class="card-header">
            <h5 class="mb-0">
              <a href="#collapseSix" data-toggle="collapse" data-parent="#accordion">
                  Question Six
                </a>
            </h5>
          </div>

          <div id="collapseSix" class="collapse">
            <div class="card-body">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt ea officiis distinctio exercitationem dolor minus placeat amet commodi, ab a perspiciatis officia nobis reiciendis numquam totam repudiandae molestias nulla, quod voluptatibus modi rerum
              laboriosam tenetur. Nihil, soluta eaque? Minima, deserunt.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80e2efeff4f3f4f2e1f0c0b4aeb5aeb3">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>

</html>

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

extract the text content from an object

I am trying to add an object to the shopping cart. The item contains a key/value pair as shown in the following image: https://i.stack.imgur.com/5inwR.png Instead of adding the title with its innerText using p and style, I would like to find another ...

javascripthtmlangular

Completes a form on a separate website which then populates information onto a different website

Creating a website that allows users to login and view various complaint forms from government websites or other sources. When a user clicks on a link to file a complaint, they will be redirected to the respective page. However, I am looking for a way to ...

javascripthtmlnode.jsformsexpress

Angular select automatically saves the selected option when navigating between views

I would like the selected option in my dropdown menu to stay selected as I navigate through different views and then return back. Here is the view: <select ng-model="selectedSeason" class="form-control" ng-options="season as 'Season '+ seas ...

javascripthtmljsonangularjsangularjs-directive

Can someone explain why the min-width property is not being respected by the <input> element?

Visit this link for the code The text field in the provided link should only be 10px wide but it is currently displaying a width of 152px. Here is the code snippet: .input { width: 100%; box-sizing: border-box; } .cont { padding: 2px; } .main ...

htmlcss

React App anchor tag's external links fail to function properly on subsequent clicks when accessed through mobile devices

I have encountered an unusual issue with <a> anchors for external links in my React App on mobile viewports. Initially, clicking an external link opens a new tab just fine on mobile. However, subsequent link clicks on the same or other <a> elem ...

javascripthtmlreactjs

What could be causing the NaN error when parsing a number in Javascript?

I'm having trouble figuring out why I keep getting a NaN when I try to print a number with JavaScript. This code snippet is used in multiple places on the website and usually works without any issues. The URL where this issue is occurring is: Here ...

javascriptjqueryhtml

Customize the appearance of a <label> tag when it is inside an <input> tag that is marked as invalid

In an ideal scenario, I wish for the text on a label to change color when the input value is considered invalid. For instance: <form> <label> Enter your name: <input type="text"> </label> </form> Ideall ...

htmlcsscss-selectors

Text not perfectly centered on the page

I'm working on a layout with 4 columns, and I want the first 3 columns to display text vertically. However, I'm having trouble aligning the text in the center of the column. Even after using justify-content and align-items properties, the text is ...

htmlcss

Text within the footer section

When displaying the name of a subcategory, I want it in one line. However, if the subcategory name contains two words, it should be displayed in two lines. https://i.stack.imgur.com/CcDeL.png Code: .Footer { width: 100%; display ...

htmlcss

Angular2 - Incorporating a New Attribute

I am working with the following Angular2 code: <ngx-datatable-column prop="id" name="ID"> <template ngx-datatable-cell-template let-row="row" let-value="value"> <a [routerLink]="['/devicedtls',r ...

cssangular

Is there a way to restrict my input to only 10 numbers without allowing any characters?

Is there a way to restrict the phone number input to only allow 10 numbers and exclude any other characters? Currently, setting the maxLength attribute limits the characters to 10 but allows additional characters as well. If I change the type attribute to ...

javascripthtmlreactjs

CSS slider experiencing issues

I'm currently working on creating a custom CSS ticker by referencing various examples online. I've managed to develop something that functions well, but it seems to only cycle through the initial 4 list items. Once it reaches the 4th item, it loo ...

htmlcsscss-animationsticker

When consecutive DOM elements are hidden, a message saying "Hiding N elements" will be displayed

Provided a set of elements (number unknown) where some elements should remain hidden: <div id="root"> <div> 1</div> <div class="hide"> 2</div> <div class="hide"> 3</div> <div class="hide"&g ...

javascriptcss

What could be the reason for the sudden malfunction of the .tabs li:hover property on my

I'm having trouble with the :hover effect not working on my .tabs li element. I've tried commenting out my jQuery script, but it still won't apply. Can anyone help me figure out why? Here's a JSFiddle link for reference: https://jsfidd ...

htmlcsshover

What is the best way to combine table cells in HTML to create a "T" shape?

Is there a way to merge the two blank cells (one above 'Be' and one above 'B') with a large blank space in the middle? I attempted using colspan and rowspan in various ways without success. https://i.stack.imgur.com/tw5SE.png This is m ...

htmlmergehtml-table

Using a UTF8 encoded MySQL database, however, special characters are not displaying properly in a PHP environment

I am facing an issue with special characters in my MySQL database that has utf_general_ci encoding. The special characters display properly when I insert data and run queries using Navicat or PhpMyAdmin. However, when I retrieve the data into a PHP variab ...

phphtmlmysqlutf

What is the best way to create floating text that appears when clicked, similar to the mechanics

https://i.stack.imgur.com/nRKG1.jpg Upon clicking the "big cookie" in my game, a popup appears displaying the number of cookies earned (like +276.341 septillion in this image). The popup slowly moves upward and then fades out. I successfully incorporated ...

javascripthtmlcsscss-animationscss-transitions

Certain CSS styles do not function properly, requiring me to include them directly in the HTML code

After successfully creating a button in HTML and applying CSS to add border effects, I ran into an issue when trying to change the background color or text color. Despite adding styles directly to the HTML file, these specific changes did not take effect. ...

htmlcss

Could someone kindly clarify the workings of this jQuery script for me?

I found this code online, but I'm struggling to comprehend its functionality. In order to make any edits for my needs, I need to understand how it operates. The purpose of this script is to close a panel with an upward slide animation when the "x" but ...

javascriptjqueryhtml

Using jQuery to Retrieve Check Box Labels and Populate Them into Textboxes

I would like to display the name of the selected checkbox label in a textbox. If multiple checkboxes are selected, I want their labels to be separated by commas and displayed in the textbox. Please excuse my poor English. $(document).ready(function() { ...

jqueryhtmlcss