BS grid not working identically

Question

In advantage grid, the card body of one division gets collapsed, when another division is clicked. However same is not happening for another grid (disadvantage). when we click one division of disadvantage section, then again when we click another division section of disadvantage section is not getting collapsed. However which is happening in advantages section. I have included the code snippet below.

 <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="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 used bootstrap 4, html5 for the web page.

Answer 1

The problem here is that you have used the same id accordion twice in your html. You have to replace that.

 <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>