javascript - not - tooltip bootstrap css

Bootstrap 3 amplía acordeón desde URL

Question

Usando Bootstrap 3, estoy tratando de usar enlaces de anclaje de subnavegación (es decir, index.php # wnsh) para expandir un acordeón específico y anclar la página al contenido. Intenté buscar ejemplos pero con poca suerte, probablemente porque mi estructura de acordeón es diferente del ejemplo de BS3 dado. Aquí está mi HTML:

ACTUALIZAR:

Hizo algunas actualizaciones al código, pero todavía no abre el acordeón especificado por el hash. ¿Alguna idea adicional?

            <div id="accordion" class="accordion-group">                
                <div class="panel">
                    <h4 id="cs" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#cs_c">Child Survival: Boosting Immunity and Managing Diarrhoea</a></h4>
                    <div id="cs_c" class="accordion-collapse collapse in">
                        <p>...</p>
                    </div>

                    <h4 id="chgd" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#chgd_c">Child Health, Growth and Development: Preventing Mental Impairment with Iodine and Iron</a></h4>
                    <div id="chgd_c" class="accordion-collapse collapse">
                        <p>...</p>
                    </div>

                    <h4 id="wmnh" class="accordion-title"><a data-toggle="collapse" data-parent="#accordion" data-target="#wmnh_c">Women’s and Newborn Survival and Health: Iron Supplementation and Food Fortification</a></h4>
                    <div id="wmnh_c" class="accordion-collapse collapse">
                        <p>...</p>
                    </div>
                </div>
            </div>

JS

var elementIdToScroll =  window.location.hash;

if(window.location.hash != ''''){
  $("#accordion .in").removeClass("in");
  $(elementIdToScroll).addClass("in");
   $(''html,body'').animate({scrollTop: $(elementIdToScroll).offset().top},''slow'');
}

Gracias por adelantado. Cualquier ayuda sería apreciada.

Answer 1

Me encontré con el mismo problema hace unos minutos. La solución parece ser simple: necesita analizar una URL y agregar una clase al acordeón compatible, usando su ID :

// Opening accordion based on URL
var url = document.location.toString();
if ( url.match(''#'') ) {
    $(''#''+url.split(''#'')[1]).addClass(''in'');
}

Probado y trabajando en Bootstrap 3.1.1.

Answer 2

Solo una respuesta, a Ilia R''s. ¡Su solución funcionó de maravilla! La única cosa, sin embargo, era que el estilo del título del panel no se estaba actualizando (la clase .collapsed necesitaba ser eliminada del enlace del título del panel), así que modifiqué un poco el código de Ilia R. Alguien probablemente tenga una solución mejor / más limpia, pero aquí hay un comienzo.

        $(document).ready(function() {
            var url = document.location.toString();
            if ( url.match(''#'') ) {
                $(''#''+url.split(''#'')[1]).addClass(''in'');
                var cPanelBody = $(''#''+url.split(''#'')[1]);
                var cPanelHeading = cPanelBody.prev();
                cPanelHeading.find( ".panel-title a" ).removeClass(''collapsed'');
            }
        });

Answer 3

Estoy usando esto en Yii2 con el widget Collapse. Asigna una identificación a tus paneles.
Si tiene html simple, puede agregar una identificación a su etiqueta a y actualizar el selector.

$(function(){
    var hash = document.location.hash;
    if (hash) {
        $(hash).find(''a'').click();
    }
});

Answer 4

Probado y trabajando en Bootstrap 3.3.5.

<script type="text/javascript">
$(document).ready(function () {
    if(location.hash != null && location.hash != ""){
        $(''.collapse'').removeClass(''in'');
        $(location.hash + ''.collapse'').collapse(''show'');
    }
});
</script>