¿Como hago para que 2 accordian esten abiertos al mismo tiempo?

publicado por: Anonymous

Tengo 2 accordion en una pagina web, el proble que tengo es que necesito hacer que los 2 accordion pueden estar abierto.

Ejemplo: los 2 accordion estan cerrados por defecto

Accordion 1 = Cerrado 
Accordion 2 = Cerrado 

al momento de dar click al accordion 1:

Accordion 1 = Abierto
Accordion 2 = Cerrado

pero cuando quiero abrir el accordion 2 el accordion 1 se cierra:

Accordion 1 = Cerrado 
Accordion 2 = abierto

lo que quiero es hacer que los 2 accordiones puedan estar abiertos:

Accordion 1 = abierto
Accordion 2 = abierto 

Codigo de los accordion:

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

Nota: el css que esta usando esta en un boostrap por lo tanto es algo
complicado saber donde esta

Pero tengo este css que yo tengo:

/***
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;
}

solución

Para mantener abiertos varios elementos del acordeón, quita el atributo data-parent de cada uno de ellos, más específicamente de esta línea:

<a data-toggle="collapse" data-parent="#accordion" href="#collapse1" style=" text-decoration: none">

_x000D_

_x000D_

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
<div class="panel-group" id="accordion" role="tablist">_x000D_
                    <div class="panel panel-default">_x000D_
                        <div class="panel-heading" style="background-color: #fff">_x000D_
                            <h4 class="panel-title">_x000D_
                                <a data-toggle="collapse" href="#collapse1" style=" text-decoration: none">_x000D_
                                    <h1> Bugs</h1>_x000D_
                                </a>_x000D_
                            </h4>_x000D_
                        </div>_x000D_
                        <div id="collapse1" class="panel-collapse collapse">_x000D_
                            <div class="panel-body">_x000D_
                                <div class="cta-desc">_x000D_
                                    <ul>_x000D_
                                        <p>_x000D_
                                            <li>_x000D_
                                                Se aplicaron correcciones en el formato de fecha de la pantalla... <a href="Ver mas.html" style="color:black"><u>(899820)</u></a>_x000D_
                                            </li>_x000D_
                                        </p>_x000D_
                                        <li>_x000D_
                                            <p>Se realizaron las siguientes modificaciones en la pantalla “SRVF015 – Consulta de inmuebles”... <a href="" style="color:black"><u>(808891)</u></a>_x000D_
_x000D_
                                        </p>_x000D_
                                        </li>_x000D_
                                    </ul>_x000D_
                                </div>_x000D_
                            </div>_x000D_
                        </div>_x000D_
                    </div>_x000D_
_x000D_
                    <div class="panel panel-default">_x000D_
                        <div class="panel-heading" style="background-color: #fff;">_x000D_
                            <h4 class="panel-title">_x000D_
_x000D_
                                <a data-toggle="collapse" href="#collapse2" style=" text-decoration: none; color: black;">_x000D_
                                    <h1>Mejoras</h1>_x000D_
                                </a>_x000D_
                            </h4>_x000D_
                        </div>_x000D_
                        <div id="collapse2" class="panel-collapse collapse">_x000D_
                            <div class="panel-body">_x000D_
                                <div class="cta-desc">_x000D_
                                    <ul>_x000D_
                                        <li>_x000D_
                                            <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>_x000D_
_x000D_
                                        </p>_x000D_
                                        </li>_x000D_
                                        <li>_x000D_
                                            <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>_x000D_
                                        </p>_x000D_
                                        </li>_x000D_
                                        <li>_x000D_
                                            <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>_x000D_
                                            </p>_x000D_
                                        </li>_x000D_
                                    </ul>_x000D_
                                </div>_x000D_
                            </div>_x000D_
_x000D_
                        </div>_x000D_
                    </div>_x000D_
                </div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *