1

Tenía un panel colapsable en Bootstrap que funcionaba, pero en cuanto cambié la página a PHP no funciona, el panel me aparece siempre abierto y quiero que al ingresar a la página aparezca cerrado y pueda abrirse y cerrarse, ya que las opciones que he encontrado, al correrlo en la página, solo abren pero no vuelven a cerrar o me aparecen abiertas, también intenté con .toggle()pero no quiero que sea de dos botones.

<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
      <div class="panel panel-default">
        <div class="panel-heading" role="tab">
          <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1"><h3 class="center-block; text-center"><strong class="text-center center-block">1er Ciclo de Conferencias <span class="glyphicon glyphicon-plus-sign pull-right"></span></strong></h3></a></h4>
        </div>
        <div id="collapseOne1" class="panel-collapse collapse in">
          <div class="panel-body"><div class="row">

      <section class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
         <h4 align="center">Título</h4>
      <aside class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> Contenido </aside> <br>
      </section>

Lo hice con <aside> y <section> porque requiero que tenga columnas dentro de cada acordeón.

Este es otro recurso que encontré, pero no funciona completamente, ya que no colapsa, solo abre el acordeón.

<button class="btn btn-info" type="button" data-toggle="collapse" data-target="#footwear" aria-expanded="false" aria-controls="footwear">
Heading
</button>

<div class="collapse" id="footwear">
<p>Collapsible content...</p>
</div>

Actualización: Quité la clase in como sugerencia de @alanfcm pero no vuelve a colapsar. Aunque sí aparece cerrada por default, @Elon.SSH me pidió que colocara el PHP completo, así que aquí está:

<?php $title = "Eventos - Laboratorios Chontalpa";
include_once 'temps/header.html';
?>


    <!--seccionesservicios-->
<div>
<!--Título-->
    <div id="titulo" class="row">
        <div id="tituloppal" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 center-block text-center"> <h1><strong>Eventos</strong></h1>

        </div>
    </div>


<!--Prueba acordeón-->


  <div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
      <div class="panel panel-default">
        <div class="panel-heading" role="tab">
          <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1"><h3 class="center-block; text-center"><strong class="text-center center-block">1er Ciclo de Conferencias <span class="glyphicon glyphicon-plus-sign pull-right"></span></strong></h3></a></h4>
        </div>
        <div id="collapseOne1" class="panel-collapse collapse">
          <div class="panel-body"><div class="row">


      <section class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="margin-bottom: 5%">
         <h4 align="center"><strong>Obesidad y su impacto en la salud</strong></h4>
      <aside class="col-lg-6 col-md-6 col-sm-6 col-xs-6"><a href="abril.html">
          <img src="images/eventos/abril.jpg" width="125px" class="img-responsive" alt="Obesidad y su impacto en la salud"></a></aside>
      <aside class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="padding-left: 5px">
          <strong>CV Ponente</strong>
          <br><a href="images/eventos/abril/curriculum_alejandro.pdf" alt="Dr. José Alejandro Chávez Fernández">Dr. José Alejandro Chávez Fernández</a><br>
          <br><strong>Conferencia</strong><br>
          <br><button type="submit" width="60px" class="btn-default"><img src="images/visualizacion-01.svg" alt="visualizar"  width="16px"><a href="images/eventos/abril/video.mp4">Visualizar</a></button>


          </aside><br>
      </section>

     <section class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="margin-bottom: 5%">
         <h4 align="center"><strong>Utilidad de las pruebas cardiopulmonares</strong></h4>
      <aside class="col-lg-6 col-md-6 col-sm-6 col-xs-6"><a href="mayo.html">
          <img src="images/eventos/mayo.jpg" width="125px" class="img-responsive" alt="Utilidad de las pruebas cardiopulmonares"></a></aside>
      <aside class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="padding-left: 5px">
          <strong>CV Ponente</strong>
          <br><a href="images/eventos/mayo/curriculum_daniel_ivan.pdf" download="Currículum_DR_Daniel-Ivan-Perez-Vasquez" alt="Dr. Daniel Iván Pérez Vásquez">Dr. Daniel Iván Pérez Vásquez</a><br>
          <br><strong>Conferencia</strong><br>
          <a href="images/eventos/mayo/Utlidad-de-la-PEAGETabasco_web.pdf">Diapositivas</a><br>
          <br><button type="submit" width="60px" class="btn-default"><img src="images/visualizacion-01.svg" alt="visualizar"  width="16px"><a href="https://www.facebook.com/LaboratoriosChontalpa/videos/1753786761349906/">Visualizar</a></button>

          </aside><br>
      </section>

       <section class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="margin-bottom: 5%">
         <h4 align="center"><strong>Biología Molecular y su uso clínico</strong></h4>
      <aside class="col-lg-6 col-md-6 col-sm-6 col-xs-6"><a href="#">
          <img src="images/eventos/junio.jpg" width="125px" class="img-responsive" alt="Utilidad de las pruebas de biología molecular (PCR)"></a></aside>
      <aside class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="padding-left: 5px">
          <strong>CV Ponentes</strong>
          <br><a href="images/eventos/junio/curriculum_biologia_molecular.pdf" alt="Dr. Aurelio Cruz Valdez">Dr. Aurelio Cruz Valdez</a>
          <br><a href="images/eventos/junio/curriculum_biologia_molecular.pdf" alt="Dr. Jacobo Zúñiga Castillo">Dr. Jacobo Zúñiga Castillo</a><br>
          <br><strong>Conferencia</strong><br>
          <br><button type="submit" width="60px" class="btn-default"><img src="images/visualizacion-01.svg" alt="visualizar"  width="16px"><a href="#">Visualizar</a></button>


          </aside><br>
      </section>

               <section class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="margin-bottom: 5%">
         <h4 align="center"><strong>Infecciones Respiratorias de Vías Altas:<br /><i>Nuevo enfoque diagnóstico</i></strong></h4>
      <aside class="col-lg-6 col-md-6 col-sm-6 col-xs-6"><a href="#">
          <img src="images/eventos/julio.jpg" width="125px" class="img-responsive" alt="Utilidad de las pruebas de biología molecular (PCR)"></a></aside>
      <aside class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="padding-left: 5px">
          <strong>CV Ponentes</strong>
          <br><a href="images/eventos/julio/Curriculum.pdf" alt="Dr. Johnny Oswaldo Santamaría Paredes">Dr. Johnny Oswaldo Santamaría Paredes</a>
          <br><a href="images/eventos/julio/Curriculum.pdf" alt="Dr. Jorge Armando Cime Castillo">Dr. Jorge Armando Cime Castillo</a><br>
          <br><strong>Conferencia</strong><br>
          <br><button type="submit" width="60px" class="btn-default"><img src="images/visualizacion-01.svg" alt="visualizar"  width="16px"><a href="#">Visualizar</a></button>


          </aside><br>
      </section>


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

</div>

<?php
include_once('temps/footer.html');
?>
1
  • si tienes tu codigo html en un docuemento php, puedes colocar todo el codigo entero?, es decir desde <?php hasta ?>
    – user47993
    Commented el 15 ago. 2018 a las 15:57

1 respuesta 1

0

Solo tienes que quitar la clase in de tu panel. Quedaria asi:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
      <div class="panel panel-default">
        <div class="panel-heading" role="tab">
          <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1"><h3 class="center-block; text-center"><strong class="text-center center-block">1er Ciclo de Conferencias <span class="glyphicon glyphicon-plus-sign pull-right"></span></strong></h3></a></h4>
        </div>
        <div id="collapseOne1" class="panel-collapse collapse">
          <div class="panel-body"><div class="row">

      <section class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
         <h4 align="center">Título</h4>
      <aside class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> Contenido </aside> <br>
      </section>

2
  • Resolvió el problema de aparecer "open" por default, pero una vez que abre, no vuelve a cerrar. Commented el 15 ago. 2018 a las 16:06
  • Aqui si funciona bien como puedes ver.
    – alanfcm
    Commented el 15 ago. 2018 a las 16:10

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.