How do I make 2 accordions open at the same time?

I have 2 accordion on a web page, the problem that I have is that I need to make the 2 accordion be open.

  

Example: The 2 accordions are closed by default

Accordion 1 = Cerrado 
Accordion 2 = Cerrado 

  

at the moment of clicking on accordion 1:

Accordion 1 = Abierto
Accordion 2 = Cerrado

  

but when I want to open the accordion 2 the accordion 1 closes:

Accordion 1 = Cerrado 
Accordion 2 = abierto

  

What I want is to make the 2 accordions be open:

Accordion 1 = abierto
Accordion 2 = abierto 

Accordion code:

  <div class="panel-group" id="accordion" role="tablist">
                    <div class="panel panel-default">
                        <div class="panel-heading" style="background-color: #fff">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" style=" text-decoration: none">
                                    <h1> Bugs</h1>
                                </a>
                            </h4>
                        </div>
                        <div id="collapse1" class="panel-collapse collapse">
                            <div class="panel-body">
                                <div class="cta-desc">
                                    <ul>
                                        <p>
                                            <li>
                                                Se aplicaron correcciones en el formato de fecha de la pantalla... <a href="Ver mas.html" style="color:black"><u>(899820)</u></a>
                                            </li>
                                        </p>
                                        <li>
                                            <p>Se realizaron las siguientes modificaciones en la pantalla “SRVF015 – Consulta de inmuebles”... <a href="" style="color:black"><u>(808891)</u></a>

                                        </p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="panel panel-default">
                        <div class="panel-heading" style="background-color: #fff;">
                            <h4 class="panel-title">

                                <a data-toggle="collapse" data-parent="#accordion" href="#collapse2" style=" text-decoration: none; color: black;">
                                    <h1>Mejoras</h1>
                                </a>
                            </h4>
                        </div>
                        <div id="collapse2" class="panel-collapse collapse">
                            <div class="panel-body">
                                <div class="cta-desc">
                                    <ul>
                                        <li>
                                            <p>Actualmente AMERIKA TI está realizando una depuración de los objetos que hacen parte de la versión del Producto, por lo tanto se envía... <a href="Ver mas1.html" style="color:black"><u>(595367)</u></a>

                                        </p>
                                        </li>
                                        <li>
                                            <p>Actualmente AMERIKA TI está realizando una depuración de los objetos que hacen parte de la versión del Producto, por lo tanto se envía... <a href="" style="color:black"><u>(726403)</u></a>
                                        </p>
                                        </li>
                                        <li>
                                            <p>En el reporte “SRVR917 - Reporte de vida útil de medidores” el cual se genera desde la pantalla... <a href="" style="color:black"><u>(789762)</u></a>
                                            </p>
                                        </li>
                                    </ul>
                                </div>
                            </div>

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

  

Note: the css you are using in a boostrap is therefore something   complicated to know where you are

But I have this css that I have:

/***
Bootstrap Line Tabs by @keenthemes
A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme
Licensed under MIT
***/

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

#menu ul {
    list-style: none;
}


/* Tabs panel */

.tabbable-panel {
    border: 1px solid #eee;
    padding: 10px;
}


/* Default mode */

.tabbable-line>.nav-tabs {
    border: none;
    margin: 0px;
}

.tabbable-line>.nav-tabs>li {
    margin-right: 2px;
}

.tabbable-line>.nav-tabs>li>a {
    border: 0;
    margin-right: 20px;
    color: #737373;
    float: center;
}

.tabbable-line>.nav-tabs>li>a>i {
    color: #a6a6a6;
}

.tabbable-line>.nav-tabs>li.open,
.tabbable-line>.nav-tabs>li:hover {
    border-bottom: 4px solid #fbcdcf;
}

.tabbable-line>.nav-tabs>li.open>a,
.tabbable-line>.nav-tabs>li:hover>a {
    border: 0;
    background: none !important;
    color: #333333;
}

.tabbable-line>.nav-tabs>li.open>a>i,
.tabbable-line>.nav-tabs>li:hover>a>i {
    color: #a6a6a6;
}

.tabbable-line>.nav-tabs>li.open .dropdown-menu,
.tabbable-line>.nav-tabs>li:hover .dropdown-menu {
    margin-top: 0px;
}

.tabbable-line>.nav-tabs>li.active {
    border-bottom: 4px solid #f3565d;
    position: relative;
}

.tabbable-line>.nav-tabs>li.active>a {
    border: 0;
    color: #333333;
}

.tabbable-line>.nav-tabs>li.active>a>i {
    color: #404040;
}

.tabbable-line>.tab-content {
    margin-top: -3px;
    background-color: #fff;
    border: 0;
    border-top: 1px solid #eee;
    padding: 15px 0;
}

.portlet .tabbable-line>.tab-content {
    padding-bottom: 0;
}


/* Below tabs mode */

.tabbable-line.tabs-below>.nav-tabs>li {
    border-top: 4px solid transparent;
}

.tabbable-line.tabs-below>.nav-tabs>li>a {
    margin-top: 0;
}

.tabbable-line.tabs-below>.nav-tabs>li:hover {
    border-bottom: 0;
    border-top: 4px solid #fbcdcf;
}

.tabbable-line.tabs-below>li.active {
    margin-bottom: -2px;
    border-bottom: 0;
    border-top: 4px solid #f3565d;
}

.tabbable-line.tabs-below>.tab-content {
    margin-top: -10px;
    border-top: 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.color {
    background-color: #A4A4A4;
}

.containerB {
    width: 100%;
    background-color: #E5E1E1;
    color: black;
}

.cuadro_intro_hover {
    padding: 0px;
    position: relative;
    overflow: hidden;
    height: 200px;
}

.cuadro_intro_hover:hover .caption {
    opacity: 1;
    transform: translateY(-150px);
    -webkit-transform: translateY(-150px);
    -moz-transform: translateY(-150px);
    -ms-transform: translateY(-150px);
    -o-transform: translateY(-150px);
}

.cuadro_intro_hover img {
    z-index: 4;
}

.cuadro_intro_hover .caption {
    position: absolute;
    top: 150px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    width: 100%;
}

.cuadro_intro_hover .blur {
    background-color: rgba(0, 0, 0, 0.7);
    height: 300px;
    z-index: 5;
    position: absolute;
    width: 100%;
}

.cuadro_intro_hover .caption-text {
    z-index: 10;
    color: #fff;
    position: absolute;
    height: 300px;
    text-align: center;
    top: -20px;
    width: 100%;
}

a {
    color: #fff;
}

a:hover {
    color: #000;
}