jquery accordion, l'ouverture d'une boîte basée sur le href

Je suis en train d'essayer d'ouvrir un accordéon fondée sur un lien que j'ai envoyer à la page

C'est mon url

services.html#branding

Je suis en utilisant le code suivant dans la tête:

 <script type="text/javascript">
      $(document).ready(function(){
     $('#accordion').accordion({collapsible: true, animated: 'slide', autoHeight: false, navigation: true, active : 'false'});
      });
  </script>

Et de l'accordéon ressemble:

<div id="accordion">
<h3 id="branding"><a href="#">Branding</a></h3>
<div>
<p>Does your business have a</p>
</div>
<h3><a href="#print">Print</a></h3>
<div>
<p>Brochures</a></p>
</div>
</div>

Toute aide serait grandement apprécié...
http://docs.jquery.com/UI/Accordion

Quel est le problème? Êtes-vous d'obtenir une erreur, n'est-il pas regarder à droite?
Il n'est pas ouvert l'accordéon "image de marque"
Juste un avertissement pour tous ceux qui cherchent à ce que la 'navigation' option est supprimée dans JQuery UI 1.9. Il sert à définir le panneau actif en fonction de l'URL. Je suppose qu'il doit avoir été trop utile. 🙁

OriginalL'auteur Andy | 2009-12-07

  1. 14

    Oh, je vois Jeff a signalé que l'INTERFACE utilisateur actuelle version est cassé, mais j'ai effectivement eu une solution à l'aide de la version actuelle...

    HTML

    <div id="accordion">
 <h3><a href="#branding">Branding</a></h3>
 <div>
  <p>Does your business have a</p>
 </div>
 <h3><a href="#print">Print</a></h3>
  <div>
  <p>Brochures</p>
  </div>
</div>

    Script

    $(function(){
 $('#accordion').accordion({
  collapsible: true,
  animated: 'slide',
  autoHeight: false,
  navigation: true
 });
 //open content that matches the hash
 var hash = window.location.hash;
 var thash = hash.substring(hash.lastIndexOf('#'), hash.length);
 $('#accordion').find('a[href*='+ thash + ']').closest('h3').trigger('click');
})

    J'ai utilisé a[href$=...] à l'origine, mais modifiée à a[href*=...]... les deux marchent

    Mise à jour: le navigation option a été supprimée de l'INTERFACE utilisateur de jQuery 1.10.0, afin d'utiliser cette méthode:

    CSS

    .accordion {
  position: relative;
}
.accordion .accordion-link {
  position: absolute;
  right: 1%;
  margin-top: 16px;
  z-index: 1;
  width: 12px;
  height: 12px;
  background: url(link.png) center center no-repeat; /* approx 12x12 link icon */
}

    Script

    var hashId = 0,
  $accordion = $('#accordion');
if (window.location.hash) {
  $accordion.children('h3').each(function(i){
    var txt = $(this).text().toLowerCase().replace(/\s+/g,'_');
    this.id = txt;
    if (txt === window.location.hash.slice(1)) {
      hashId = i;
    }
  });
}

$accordion.accordion({
  active: hashId,
  animate: false,
  heightStyle: 'content',
  collapsible: true,
  create: function( event, ui ) {
    $accordion.children('h3').each(function(i){
      $(this).before('<a class="accordion-link link" data-index="' + i + '" href="#' + this.id + '"></a>');
    });
    $accordion.find('.accordion-link').click(function(){
      $accordion.accordion( "option", "active", $(this).data('index') );
    });
  }
});
    merci à vous les gars pour en notant le problème avec la version et merci pour la solution ci-dessus.
    il fonctionne comme un charme! très belle solution
    J'ai mis à jour ma réponse pour fonctionner avec l'INTERFACE utilisateur de jQuery v1.10.0+
    Pour définir la valeur de hachage n'aurait-il pas été beaucoup plus facile pour ajouter cet accordéon de propriété: activate: function( event, ui ) { location.hash = ui.newHeader.find('a').attr('href'); }

    OriginalL'auteur Mottie

  2. 2

    La mauvaise nouvelle, c'est que l'accordéon plugin est actuellement cassé (1.7.2, que vous pouvez voir sur le ticket #4653). La bonne nouvelle est qu'il est fixe, et vous pouvez déjà prendre la dernière version ici - mais attention, ce n'est pas une version stable encore!

    Si vous utilisez la 1.8.1 code, la fonction de navigation fonctionne à nouveau. Réglage navigation: true direct de l'accordéon pour ouvrir automatiquement le bon panneau lorsque vous accédez à l'url qui correspond à votre navigation fragment (de sorte que votre exemple de travail: services.html#branding).

    Je pense que vous aussi, vous voulez ajouter le manque d'identifiant pour votre image de marque balise d'ancrage, comme ceci:

    <h3 id="branding"><a href="#branding">Branding</a></h3>

    Enfin, vous souhaiterez peut-être utiliser la technique décrite ici de mettre à jour votre url de la page afin de refléter ce qui accordéon panneau a été cliqué sans rechargement de votre page.

    Merci pour votre commentaire Jeff
    C'est d'un grand intérêt pour moi, mais votre technique described here lien est mort. Toute mise à jour?

    OriginalL'auteur Jeff Sternal

  3. 2

    Façon la plus simple pour ce faire est d'utiliser focusin.

         $(function() {
    $( "#accordion" ).accordion({
        event: "focusin"
    });
});


<div id="accordion">
<h3 id="section-1">Section 1</h3>
<div>
    <p>blaa </p>
</div>
<h3 id="section-2">Section 2</h3>
<div>
    <p>bla</p>
</div>

    vous pouvez href partir de la même page ou à partir d'une autre page simplement en faisant 

    <a href "otherpage.html#section-1">click to go to section 1</a>

    OriginalL'auteur zvikachu

  4. 0

    Voir: Activer Accordéon Section Par l'URL de Hachage

    Démo: trouvé ici.

    TL;DR ... Voici le code:

    $( "#accordion" ).accordion({

    //Called when the widget instance is created.
    create: function( e, ui ) {

        //The accordion DOM element.
        var $this = $( this );

        //Triggered when the browser hash changes.
        $( window ).on( "hashchange", function( e ) {

                //The selector string used to find all accordion headers.
            var headers = $this.accordion( "option", "header" ),

                //The header we're looking for, based on the location hash.
                header = $( location.hash ),

                //The index of the header we're looking for.
                index = $this.find( headers ).index( header );

            //If there's a valid index, activate the accordion section.
            //Otherwise, do nothing.
            if ( index >= 0 ) {
                $this.accordion( "option", "active", index );    
            }

        });

        //Make sure this works on initial page load.
        $( window ).trigger( "hashchange" );

    }

});

    ... et le code HTML:

    <div id="accordion">
  <h3 id="section1">Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3 id="section2">Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>
  <h3 id="section3">Section 3</h3>
  <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3 id="section4">Section 4</h3>
  <div>
    <p>
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.
    </p>
    <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
  </div>
</div>

    A bien fonctionné pour mes besoins!

    OriginalL'auteur mhulse

  5. 0

    Voici comment le faire...

    Il mettra à jour la table de hachage pour vous en fonction de ce qui est à l'intérieur de votre h3 balises.

    Vous pouvez également spécifier un index en définissant un attribut sur votre accordéon div conteneur comme ça... de données-active-index="2"

    var initAccordion = function(_t) {
    _t.each(function() {
        var obj = {
            heightStyle: 'content',
            collapsible: true,
            beforeActivate: function( event, ui ) {
                window.location.hash = ui.newHeader.attr('id');
            }
        };
        //preset the active tab in html [0 = first tab]
        var attr = $(this).attr('data-active-index');
        obj.active = null;
        if(attr !== null && attr !== undefined) {
            obj.active = Number(attr);
        }
        //human readable ids        
        var hash = window.location.hash;
        $(this).find('>h3').each(function(i){
            this.id = $(this).text().toLowerCase().replace(/[^a-z0-9]/g, function(s) {
                var c = s.charCodeAt(0);
                if (c == 32) return '_'; //space
                return '';
            });
            if(hash && hash == '#'+this.id) {
                obj.active = i;
            }
        });
        $(this).accordion(obj);
    });
};initAccordion($(".accordion"));

    OriginalL'auteur Kinoli