0

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.

2
  • Estás usando la versión 4 de Bootstrap? Commented el 22 nov. 2018 a las 17:03
  • no, es la version 3, tuve que usarla
    – Harvey66
    Commented el 22 nov. 2018 a las 17:05

1 respuesta 1

2

Esto es lo que te propongo:

Dentro de un div con clase row incluí las dos columnas col-md-6 que usas en tu código, una para la izquierda y otra para la derecha.

Dentro de cada una de esas dos columnas, agrego las clases que trae Bootstrap para crear paneles colapsables o acordeones. Puedes revisar este tutorial de W3Schools.

No sobra recordarte que tengas cuidado llamando los paneles, que cada href esté asociado al ID que le corresponde. Por ejemplo:

Esta línea <a data-toggle="collapse" data-parent="#accordion" href="#collapse7"> debe llamar únicamente a este panel <div id="collapse7" class="panel-collapse collapse in"> (Donde collapse7 es el indicador).

El resto del trabajo lo hacen Bootstrap y Jquery.

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;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>  
  
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  
  <!-- Bootstrap 3 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  
</head>

<body>

  <div class="row">

  <!--Acordeones Izq-->
  <div class="col-md-6">      
 
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
  </div> 
</div>

<!--Acordeones Der-->
<div class="col-md-6">
 
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Collapsible Group 4</a>
        </h4>
      </div>
      <div id="collapse4" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Collapsible Group 5</a>
        </h4>
      </div>
      <div id="collapse5" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse6">Collapsible Group 6</a>
        </h4>
      </div>
      <div id="collapse6" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
  </div> 
</div>
</div>
  
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  

</body>


PD:

Si deseas que uno (o varios) de esos paneles inicie "abierto" o desplegado por defecto, agrega al final de la clase la palabra in:

Así arranca el panel cerrado:

<div id="collapse1" class="panel-collapse collapse">

Así arranca el panel abierto:

<div id="collapse1" class="panel-collapse collapse in">
8
  • No amigo, no me funciono como me lo planteaste la columna derecha sigue sin funcionar como debe, creo que tendre que dejar una con bootstrasp y la otra desde cero e intentar que se parescan los mas posible, pero agradezco tu tiempo y consejo.
    – Harvey66
    Commented el 23 nov. 2018 a las 15:23
  • No te rindas tan fácil, qué problema tienes? Viste la respuesta a Página Completa en el navegador? Commented el 23 nov. 2018 a las 15:30
  • si, lo probe de varias formas, creo que es porque bootstrap reconoce las dos como una sola y puesto que tienen el mismo id no me permite que trabajen de la misma forma por separado ya que al tocar la derecha la izquierda es afectada pero no al revez. es complicado, seguire intentando de cualquier forma hasta que funcione, de nuevo agradezco tu tiempo.
    – Harvey66
    Commented el 23 nov. 2018 a las 15:38
  • En mi código cada grupo es individual, izquierdo y derecho. Si despliego un acordeon del lado derecho, solo se aplica a ese grupo, lo mismo con el lado derecho Commented el 23 nov. 2018 a las 15:49
  • pero cuando lo probe en el lado derecho se pueden abrir todos al mismo tiempo y trato de evitar eso.
    – Harvey66
    Commented el 23 nov. 2018 a las 15:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.