accordéon jquery, l'ouverture d'une boîte basée sur href

Question

Je suis en train d'ouvrir un accordéon basé sur un lien que je transmets à la page

Ceci est mon url

services.html # marque

I 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 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ée ... http://docs.jquery.com/UI/Accordion

Answer 1

Oh je vois Jeff a rapporté que la version de l'interface utilisateur actuelle est cassé, mais j'ai eu en fait une solution en utilisant 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 l'a changé pour a[href*=...] ... soit fonctionnera

---

Mise à jour: le navigation option was removed from jQuery UI 1.10.0, donc 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')); 
    }); 
    } 
}); 

Answer 2

Les mauvaises nouvelles sont que le plug-in d'accordéon est actuellement cassé (en 1.7.2, which you can see from ticket #4653). Les bonnes nouvelles sont que c'est corrigé, et you can already grab the latest version here - mais attention, ce n'est pas encore une version stable!

Si vous utilisez le code 1.8.1, la fonction de navigation fonctionne à nouveau. Le réglage navigation: true dirigera l'accordéon pour ouvrir automatiquement le bon panneau lorsque vous naviguez vers une URL correspondant à votre fragment de navigation (pour que votre exemple fonctionne: services.html#branding).

Je pense que vous voulez aussi ajouter l'identifiant manquant à votre balise d'ancrage de la marque, comme ceci:

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

Enfin, vous pouvez utiliser the technique described here mettre à jour l'URL de votre page pour refléter quel panneau accordéon a été cliqué sans recharger votre page.

Answer 3

Voir:Activate Accordion Section By URL Hash

Démonstration:found here.

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

ont bien fonctionné pour mes besoins!

Answer 4

Voici comment faire ...

Il mettra à jour le hachage pour vous en fonction de ce qui est dans vos balises h3.

Vous pouvez également spécifier un index en définissant un attribut sur votre conteneur accordéon div comme celui-ci ... données actif 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")); 

Answer 5

meilleure façon de faire cela 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 de la même page ou d'une autre page simplement en faisant

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