BS grid malfunctioning in a non-uniform manner

When a division in the advantage grid is clicked, the card body of another division collapses. However, this does not occur in the disadvantage grid. Clicking on one section in the disadvantage grid does not collapse another section as it does in the advantage grid. Below is the code snippet.

<section id="explore-section" class="bg-light text-muted py-5">
  <div class="container">

    <div class="row">
      <div class="col-md-6">

        <h3>
          <p class="text-center bg-dark py-2" id="advantages">Advantages</p>
        </h3>
        <div id="accordion" role="tablist">

          <div class="card">
            <div class="card-header" id="heading1">
              <h5 class="mb-0">
                <div href="#collapse1" data-toggle="collapse" data-parent="#accordion">
                  <i class="fa fa-chevron-down float-right"></i> Reduces iron levels
                </div>
              </h5>
            </div>

            <div id="collapse1" class="collapse text-justify">
              <div class="card-body">
                Iron is a mineral that the body needs to produce red blood cells.
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header" id="heading2">
              <h5 class="mb-0">
                <div href="#collapse2" data-toggle="collapse" data-parent="#accordion">
                  <i class="fa fa-chevron-down float-right"></i> Identifies adverse health effects
                </div>
              </h5>
            </div>

            <div id="collapse2" class="collapse text-justify">
              <div class="card-body">
                Each person who donates blood completes a simple physical examination and short blood test before giving blood.


              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header" id="heading3">
              <h5 class="mb-0">
                <div href="#collapse3" data-toggle="collapse" data-parent="#accordion">
                  <i class="fa fa-chevron-down float-right"></i>Helps people feel good about themselves
                </div>
              </h5>
            </div>

            <div id="collapse3" class="collapse text-justify">
              <div class="card-body">

                Donating blood has the power to impact up to three people who need the blood to survive.


              </div>
            </div>
          </div>


          <div class="card">
            <div class="card-header" id="heading4">
              <h5 class="mb-0">
                <div href="#collapse4" data-toggle="collapse" data-parent="#accordion">
                  <i class="fa fa-chevron-down float-right"></i>Burns calories
                </div>
              </h5>
            </div>

            <div id="collapse4" class="collapse text-justify">
              <div class="card-body">

                Donating blood burns up to 650 calories per donation, according to the St.
              </div>
            </div>
          </div>

        </div>
      </div>


      <div class="col-md-6">

        <h3>
          <p class="text-center bg-dark py-2" id="disadvantages">Disadvantages</p>
        </h3>
        <div id="accordion" role="tablist">

          <div class="card">
            <div class="card-header" id="headingOne">
              <h5 class="mb-0">
                <div href="#collapseOne" data-toggle="collapse" data-parent="#accordion">
                  <i class="fa fa-chevron-down float-right"></i> Pain
                </div>
              </h5>
            </div>

            <div id="collapseOne" class="collapse text-justify">
              <div class="card-body">
                The site of the needle's insertion may be painful.
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header" id="headingTwo">
              <h5 class="mb-0">
                <div href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">
                  <i class="fa fa-chevron-down float-right"></i> Weakness
                </div>
              </h5>
            </div>

            <div id="collapseTwo" class="collapse text-justify">
              <div class="card-body">

                After donating a pint of blood, a person may feel faint or dizzy, and these symptoms are common.
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header" id="headingThree">
              <h5 class="mb-0">
                <div href="#collapseThree" data-toggle="collapse" data-parent="#accordion">
                  <i class="fa fa-chevron-down float-right"></i> Dizziness, Lightheadedness, and Nausea
                </div>
              </h5>
            </div>

            <div id="collapseThree" class="collapse text-justify">
              <div class="card-body">

                After your donation is complete, you will be told to sit in an observation area for 15 minutes.


              </div>
            </div>
          </div>


          <div class="card">
            <div class="card-header" id="headingFour">
              <h5 class="mb-0">
                <div href="#collapseFour" data-toggle="collapse" data-parent="#accordion">
                  <i class="fa fa-chevron-down float-right"></i> Bruising
                </div>
              </h5>
            </div>

            <div id="collapseFour" class="collapse text-justify">
              <div class="card-body">

                When you donate blood, you sit or lie on a reclining chair with your arm extended on an armrest.
              </div>
            </div>
          </div>
        </div>

      </div>

    </div>

  </div>

  </div>

</section>

I have built the webpage with Bootstrap 4 and HTML5.

htmlcsstwitter-bootstrap-3frontendtwitter-bootstrap-4-beta

Answer №1

The issue at hand is the duplication of the id accordion in your HTML code. You need to rectify this.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<section id="explore-section" class="bg-light text-muted py-5">
  <div class="container">

    <div class="row">
      <div class="col-md-6">

        <h3>
          <p class="text-center bg-dark py-2" id="advantages">Advantages</p>
        </h3>
        <div id="accordion" role="tablist">

          <div class="card">
            <div class="card-header" id="heading1">
              <h5 class="mb-0">
                <div href="#collapse1" data-toggle="collapse" data-parent="#accordion">
                  <i class="fa fa-chevron-down float-right"></i> Reduces iron levels
                </div>
              </h5>
            </div>

            <div id="collapse1" class="collapse text-justify">
              <div class="card-body">
                Iron is a mineral that the body needs to produce red blood cells.
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header" id="heading2">
              <h5 class="mb-0">
                <div href="#collapse2" data-toggle="collapse" data-parent="#accordion">
                  <i class="fa fa-chevron-down float-right"></i> Identifies adverse health effects
                </div>
              </h5>
            </div>

            <div id="collapse2" class="collapse text-justify">
              <div class="card-body">
                Each person who donates blood completes a simply physical examination and short blood test before giving blood.
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header" id="heading3">
              <h5 class="mb-0">
                <div href="#collapse3" data-toggle="collapse" data-parent="#accordion">
                  <i class="fa fa-chevron-down float-right"></i>Helps people feel good about themselves
                </div>
              </h5>
            </div>

            <div id="collapse3" class="collapse text-justify">
              <div class="card-body">
                Donating blood has the power to impact up to three people who need the blood to survive.
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header" id="heading4">
              <h5 class="mb-0">
                <div href="#collapse4" data-toggle="collapse" data-parent="#accordion">
                  <i class="fa fa-chevron-down float-right"></i>Burns calories
                </div>
              </h5>
            </div>

            <div id="collapse4" class="collapse text-justify">
              <div class="card-body">
                Donating blood burns up to 650 calories per donation, according to the St.
              </div>
            </div>
          </div>

        </div>
      </div>


      <div class="col-md-6">

        <h3>
          <p class="text-center bg-dark py-2" id="disadvantages">Disadvantages</p>
        </h3>
        <div id="accordion2" role="tablist">

          <div class="card">
            <div class="card-header" id="headingOne">
              <h5 class="mb-0">
                <div href="#collapseOne" data-toggle="collapse" data-parent="#accordion2">
                  <i class="fa fa-chevron-down float-right"></i> Pain
                </div>
              </h5>
            </div>

            <div id="collapseOne" class="collapse  text-justify">
              <div class="card-body">
                The site of the needle's insertion may be painful.
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header" id="headingTwo">
              <h5 class="mb-0">
                <div href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2">
                  <i class="fa fa-chevron-down float-right"></i> Weakness
                </div>
              </h5>
            </div>

            <div id="collapseTwo" class="collapse text-justify">
              <div class="card-body">
                After donating a pint of blood, a person may feel faint or dizzy, and these symptoms are common.
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header" id="headingThree">
              <h5 class="mb-0">
                <div href="#collapseThree" data-toggle="collapse" data-parent="#accordion2">
                  <i class="fa fa-chevron-down float-right"></i> Dizziness, Lightheadedness, and Nausea
                </div>
              </h5>
            </div>

            <div id="collapseThree" class="collapse  text-justify">
              <div class="card-body">
                After your donation is complete, you will be told to sit in an observation area for 15 minutes.
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header" id="headingFour">
              <h5 class="mb-0">
                <div href="#collapseFour" data-toggle="collapse" data-parent="#accordion2">
                  <i class="fa fa-chevron-down float-right"></i>Bruising
                </div>
              </h5>
            </div>

            <div id="collapseFour" class="collapse  text-justify">
              <div class="card-body">
                When you donate blood, you sit or lie on a reclining chair with your arm extended on an armrest.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

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

What is causing Ajax to fail in connecting to the server?

When trying to submit a simple ajax form and send a response to my server, I keep getting the following error message : Forbidden (CSRF token missing or incorrect.): /designer/addOne/ [31/Jul/2017 12:49:12] "POST /designer/addOne/ HTTP/1.1" 403 2502 Alt ...

jqueryhtmlajax

Aligning multiple 'divs' horizontally with different lengths of text

I have a set of 3 identical divs with fixed width. Each contains text of varying lengths and another nested div that is aligned to the right using float. When the text lengths are equal, they align perfectly. However, when the text lengths differ, the ali ...

htmlcss

Tips for connecting elements at the same index

.buttons, .weChangeColor { width: 50%; height: 100%; float: left; } .weChangeColor p { background: red; border: 1px solid; } .toggleColor { background: green; } <div class="buttons"> <p><a href="#">FirstLink</a></ ...

javascriptjqueryhtmlcss

Implement a background image in the navigation bar links using CSS

Strange as it may seem, the image refuses to show up in the navbar. Adding borders or other styling makes it visible, but not the image itself. If I manually include the image using the <img/> tag in the HTML, it appears, but then the hover effect do ...

htmlimagecss

Having trouble with prettyphoto functionality

Seeking assistance as I am struggling to get this working Here is how I have set it up: <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/ ...

javascriptjquerycss

Task: Choose MySQL option and Retrieve JSON data

I have a question regarding implementing a function in a separate module file and calling it within a route to retrieve query data: function getSobre() { return new Promise((resolve, reject) => { db.query(`SELECT * FROM sobre ORDER BY cod ...

javascripthtmlnode.jsexpress

The gradient applied to the svg <text> element is failing to function

I'm currently working with an SVG element and trying to incorporate a <text> element with a gradient. Interestingly, the same LinearGradient successfully applies to one SVG but not to another. My question is whether a gradient can be applied to ...

htmlcsssvggradientlinear-gradients

Need to specify a parameter type for the input tag in HTML

Currently, I am developing a customized focus method for my webpage using the following script: <script type="text/javascript"> function myFunction() { document.getElementById("name").focus(); } </script> I ...

javascripthtml

Displaying Empty Boxes using Font Awesome

I was able to show Font Awesome properly before, but now it's not working even though I haven't made any changes. I've attempted various solutions but nothing seems to be fixing the issue. My goal is to display it as a placeholder. Below is ...

htmlcsstwitter-bootstrapfont-awesomebootstrap-4

What is the process for altering the background color of a modal?

I'm trying to figure out how to change the background color of my modal once it's displayed, similar to this example: https://i.stack.imgur.com/fOUDZ.png. I want the background color to cover the entire page and not just the modal itself. When I ...

htmlcss

Retrieving elements from the DOM based on their class name

Currently utilizing PHP DOM for my project and facing the challenge of retrieving an element within a DOM node with a specific class name. What would be the most effective method to accomplish this? Update: Ultimately decided to switch to using Mechanize ...

phpcssdom

The compilation of SCSS CSS is encountering an error with the provided CSS code

Upon compiling SCSS, I encountered an error with the following CSS: span.icon-hcp { filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src='../images/icon-hc.jpg', sizingMethod='scale') !important; -ms-filter: ...

htmlcsscompiler-errorssass

Is there a reason why the integration of OnsenUI with Vue using vue-onsenui and v-ons-segment is not functioning

I am experiencing an issue with OnsenUI and VUE vue-onsenui v-ons-segment. Instead of displaying a button bar in a row as expected, I am seeing standard buttons. The problematic code resides in a customized Monaca CLI project utilizing the minimal VUE tem ...

cssvue.jsvuejs2segmentonsen-ui2

Is there a way to ensure the collapsible item stays in its position?

I'm encountering an issue with the display of items within collapsible cards. Here is what it currently looks like: https://i.sstatic.net/DM8sX.png And this is how I want it to appear: https://i.sstatic.net/BXGpW.png Is there a way to achieve the ...

javascripthtmlcsslayoutbootstrap-4

Error: the function is not defined, therefore the variable is being passed

I'm attempting to pass a variable in the URL in order to automatically check a radio button on a different page depending on which link is clicked. However, I keep encountering an "Uncaught ReferenceError: radio_onload is not defined" error. Could th ...

javascripthtmlradio-button

The functionality of bootstrap.styl malfunctions during the parsing process in stylus

I am attempting to incorporate stylus, a css preprocessor, with twitter bootstrap version 2.04. Upon downloading boostrap, I execute the command "stylus --css < bootstrap.css > bootstrap.styl" to generate a bootstrap.styl file. However, upon trying t ...

cssnode.jstwitter-bootstrapexpressstylus

Prevent the overlap of text by controlling the positioning of a div element

Below is a simplified version of the layout I'm working with: <div style="position: relative; width:600px;"> <p>Content with unknown length, but very lengthy</p> <div>Content with unknown height</div&g ...

htmlcss

problems arise due to padding and floating on the navigation bar

I have been facing a couple of challenges with my code. Firstly, I am trying to remove the small annoying line underneath my selected navigation links and also attempting to float both the header and footer to the right without losing their backgrounds. I ...

phphtmlcss

The width specified for the table is not being applied

I've been struggling to adjust the width of my table in order to display data from a database. I've tried using inline width, !important tag, id, and class but none have worked. Interestingly, when I apply a fixed width without dynamic data, it w ...

htmlcss

Is there a way to position the button on the right side rather than the center using a negative right Y value?

I'm looking for something that: Has a button on the right side, not just beside the input. The current setup involves using an unattractive width: 138%, which doesn't consistently work across different browsers and devices. The button ends up a ...

htmlcssbootstrap-5