Bootstrap 3 développez accordéon à partir de l'URL

En utilisant Bootstrap 3, je suis en train d'utiliser les sous-navigation les liens d'ancrage (c'est à dire, index.php#wnsh) pour développer un certain accordéon et ancre en bas de la page pour le contenu. J'ai essayé de chercher des exemples, mais avec un peu de chance, probablement parce que mon accordéon structure est différente de la BS3 exemple. Voici mon code HTML:

Mise à JOUR:

Fait quelques mises à jour du code, mais il n'est toujours pas l'ouverture de l'accordéon spécifié par la valeur de hachage. Toutes les pensées?

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

var elementIdToScroll =  window.location.hash;

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

Merci à l'avance. Toute aide serait appréciée.

Êtes-vous manque le transition plugin car il fonctionne très bien pour moi. Voir ce violon
Transition plugin est là. Je suis en train d'ouvrir un accordéon via l'url hashtag, quelque chose comme de la page.html#cs. Le réel de l'accordéon fonctionnalité fonctionne très bien pour moi.
Je pense que vous pouvez écrire du code javascript qui s'exécute sur la page prêt. Vous pouvez obtenir en utilisant le hashtag window.location.hash et faire quelque chose comme je l'ai fait dans le mise à jour de violon
Merci pour la réponse @pitamber-tiwari, j'ai essayé ton code et bien qu'il travaille avec le hash codé en dur, il n'a pas de fenêtre.emplacement.hash, ni a été le premier accordéon ouvert au chargement de la page.

OriginalL'auteur robotsmeller | 2014-03-07

16

J'ai rencontré le même problème il ya quelques minutes. La solution semble être très simple - vous avez besoin pour analyser un URL et ajouter une classe in de la contrepartie de l'accordéon, à l'aide de son id:
```
//Opening accordion based on URL
var url = document.location.toString();
if ( url.match('#') ) {
    $('#'+url.split('#')[1]).addClass('in');
}
```
Testé et de travail dans le Bootstrap 3.1.1.

Qui m'aide, mais je voudrais ajouter ceci: var url = document.emplacement.toString(); if ( url.match('#') ) { $('#'+url.split('#')[1]).effondrement('show'); } Pour obtenir le javascript effet.
Une raison en particulier nous ne sommes pas à l'aide de window.location.hash?
Qu'entendez-vous par "pour obtenir le javascript effet". Quel est l'effet?
J'ai édité la réponse à inclure votre bootstrap moyen de le faire. (la méthode préférée de l'OMI)
Dernière Bootstrap nécessite show, pas in

OriginalL'auteur Ilia Rostovtsev

Testé et de travail dans le 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>

OriginalL'auteur Thiago Montini

1

Je suis en utilisant ce dans Yii2 avec l'Effondrement du widget.
Attribuer un id à vos panneaux.

Si vous avez html, vous pouvez juste ajouter un id à votre un-tag et mise à jour le sélecteur.
```
$(function(){
    var hash = document.location.hash;
    if (hash) {
        $(hash).find('a').click();
    }
});
```
OriginalL'auteur Ruben

Juste une réponse, à Ilia R. Sa solution a très bien fonctionné! La seule chose, cependant, était que le panneau du style de titre n'était pas à jour (l' .s'est effondré de classe ont dû être retirés à partir du panneau de titre de lien), donc j'ai modifié Ilia R du code un peu. Quelqu'un a probablement un meilleur /solution plus propre, mais voici un début.

        $(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');
            }
        });

OriginalL'auteur Ryan Dorn

Pour moi travaillé:

    $(document).ready(function() {
        var url = document.location.toString();
        if ( url.match('#') ) {
            var cPanelBody = $('#'+url.split('#')[1]);
            cPanelBody.find(".panel-title a")[0].click();
        }
    });

OriginalL'auteur Jafix

Vous devez vous connecter pour publier un commentaire.