Estoy creando una pagina de html
y quiero que tenga dos columnas con 13 acordeones cada una pero no quiero que se puedan ver mas de uno al mismo tiempo en cada columna, solo funciona la izquierda como quiero, la derecha permite que se vean todas y parece que cada una es independiente y no se como arreglarlo para que la columna derecha funcione como la izquierda.
asi es mi codigo
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>
Alguien sabe que estoy haciendo mal para que no funcione como debe la columna izquierda agradezco mucho la información y consejos.