Estimados colegas. El caso que tengo es el siguiente, tengo dos páginas HTML. En la primera index.html tengo al pie de la pagina el siguiente código.
<div class='col-xs-12 col-sm-4 col-md-4 col-lg-4'> <div id='Recursos' class='widget'> <div class='panel-heading label-footer'> <h4>Recursos</h4> </div> <div class='footer-list footer-box'> <ul class='resource-list'> <li><a href="resources.html#collapseResourceOne">Formatos</a></li> <li><a href="resources.html#collapseResourceTwo">Glosario</a></li> <li><a href="resources.html#collapseResourceThree">Herramientas</a></li> </ul> </div> </div> </div>
En la segunda resources.html el siguiente codigo.
<div role="tablist" id="resources" class="panel-group" aria-multiselectable="true"> <!-- Formatos --> <div class="panel panel-default"> <div role="tab" id="ResourceOne" class="panel-heading"> <h4 class="panel-title"> <a href="#collapseResourceOne" data-toggle="collapse" data-parent="#resources" class="collapsed" aria-expanded="false" aria-controls="collapseResourceOne">Formatos</a> </h4> </div> <div role="tabpanel" id="collapseResourceOne" class="panel-collapse collapse" aria-labelledby="ResourceOne"> ... ... </div> </div> <!-- Glosario --> <div class="panel panel-default"> <div role="tab" id="ResourceTwo" class="panel-heading"> <h4 class="panel-title"> <a href="#collapseResourceTwo" data-toggle="collapse" data-parent="#resources" class="collapsed" aria-expanded="false" aria-controls="collapseResourceTwo">Glosario</a> </h4> </div> <div role="tabpanel" id="collapseResourceTwo" class="panel-collapse collapse" aria-labelledby="ResourceTwo"> ... ... </div> </div> <!-- Herramientas --> <div class="panel panel-default"> <div role="tab" id="ResourceThree" class="panel-heading"> <h4 class="panel-title"> <a href="#collapseResourceThree" data-toggle="collapse" data-parent="#resources" class="collapsed" aria-expanded="false" aria-controls="collapseResourceThree">Herramientas</a> </h4> </div> <div role="tabpanel" id="collapseResourceThree" class="panel-collapse collapse" aria-labelledby="ResourceThree"> ... ... </div> </div> </div>
Y lo que se necesita es que al seleccionar el enlace de la pagina Index.html se muestre el collapse correspondiente de la pagina resource.html
En el material leído de boostrap, se menciona la siguiente instrucción javascript $('.collapse').collapse(), pero no hallo la forma de como usarlo e implementarlo.
Agradeceré su colaboración y experiencia.
Respuestas
Los enlaces de la página index.html los tienes bien, ya que sólo hay que añadir #collapse... al final del enlace. En la página resources.html es donde tienes que que activar el collapse. Para ello tienes dos opciones:
1. Activarlo a mano mediante JavaScript
Primero tienes que enlazar en la página el archivo JavaScript de Bootstrap y el de jQuery. Después tienes que añadir este código en tu página:
<script type="text/javascript"> $(function() { $('#resources').collapse() }); </script>
2. Usar los atributos HTML
Esta forma es más sencilla y se recomienda hacerlo así. Simplemente tienes que enlazar los archivos JavaScript de Bootstrap y jQuery y después configurar bien los atributos data- de los elementos que forma el collapse. Así Bootstrap sabrá lo que tiene que mostrar u ocultar en cada momento. En tu caso ya lo tienes hecho así. Ejemplo:
<a href="#collapseResourceThree" data-toggle="collapse" data-parent="#resources" class="collapsed" aria-expanded="false" aria-controls="collapseResourceThree"> Herramientas </a>
Así que sólo te faltaría enlazar los archivos de JavaScript en esa página resources.html.
@javiereguiluz