I am creating a page of html and I want it to have two columns with 13 accordions each but I do not want more than one to be seen at the same time in each column, only the left works as I want, the right allows they all look and it seems that each one is independent and I do not know how to fix it so that the right column works like the left.
This is my code
a:hover,a:focus{
text-decoration: none;
outline: none;
}
#accordion .panel{
border: none;
box-shadow: none;
border-radius: 0;
margin-bottom: 15px;
}
#accordion .panel-heading{
padding: 0;
}
#accordion .panel-title a{
display: block;
font-size: 16px;
font-weight: bold;
line-height: 24px;
color: #fff;
background: #38B74B;
border: 2px solid #38B74B;
padding: 15px 20px 15px 47px;
position: relative;
transition: all 0.5s ease 0s;
}
#accordion .panel-title a.collapsed{
background: #fff;
border-color: #ddd;
color: #888;
}
#accordion .panel-title a:before{
content: "\f106";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 18px;
position: absolute;
top: 30%;
left: 20px;
transition: all 0.3s ease 0s;
}
#accordion .panel-title a.collapsed:before{
content: "\f107";
}
#accordion .panel-body{
font-size: 15px;
color: #8c8c8c;
line-height: 25px;
background: #f6f6f6;
border: none;
padding: 14px 20px;
}<div class="row">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
CONSULTA DE MEDICINA GENERAL</a>
</h3>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<div class="row">
<h3 class="text-center">CONSULTA DE MEDICINA GENERAL</h3> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi praesentium laborum recusandae saepe earum repellendus officia sed libero placeat ut magni quidem illo, fugit rem quam culpa quo excepturi sit!
<!-- /row -->
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Anestesiología</a>
</h3>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed, possimus odio? Pariatur eligendi tempore vel incidunt sint libero non, dolorum, totam, dicta quae similique recusandae possimus mollitia illo magni rem?
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-group" id="accordion">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse14">
Odontología</a>
</h3>
</div>
<div id="collapse14" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel necessitatibus ab, nostrum quo, facere, quaerat cumque repudiandae expedita commodi quisquam maxime omnis ad aut repellat. Similique totam mollitia molestias labore!
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse15">
Oftalmología</a>
</h3>
</div>
<div id="collapse15" class="panel-collapse collapse">
<div class="panel-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat sunt facere soluta inventore at dicta! Dolores illum harum molestiae dolor at officiis laborum numquam aut corporis tempore, temporibus quaerat ad?
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Someone knows what I am doing wrong so that it does not work as the left column should, I appreciate the information and advice a lot.