Accordéon Jquery, assistant suivant et précédent, comment obtenir les sections précédentes et suivantes?

Question

J'ai un accordéon Jquery qui fonctionne bien. Les sections sont développées/réduites lorsqu'on clique sur les en-têtes respectifs. Mais je veux ajouter la fonctionnalité de sorte que lorsque je clique sur le bouton "suivant", il ouvre la section suivante et cliquer sur le bouton "Précédent" me ramène à la section précédente.

Cela a été fait sur cette page http://jquery.bassistance.de/accordion/demo/?p=1.1.2 (dernier exemple) mais je ne sais pas comment l'implémenter dans mon cas.

Toutes les suggestions s'il vous plaît.

Merci

MISE À JOUR: Comment puis-je obtenir la section précédente ou suivante de l'accordéon?

<script type="text/javascript"> 
$("#accordion").accordion({ 
    header: "h3.header" 
    , autoHeight: false 
    , collapsible: true 
    }); 
</script> 

<div id="accordion"> 
<h3 class="header">Section 1</h3> 
<div> content 1 .. content 1 .. content 1 .. content 1 .. 
    <input class="next" type="button" value="next"/> 
</div> 
<h3 class="header">Section 2</h3> 
<div> content 2 .. content 2 .. content 2 .. content 2 .. 
    <input class="previous" type="button" value="previous"/> 
    <input class="next" type="button" value="next"/> 
</div> 
<h3 class="header">Section 3</h3> 
<div> content 3 .. content 3 .. content 3 .. content 3 .. 
    <input class="previous" type="button" value="previous"/> 
</div> 
</div> 

Answer 1

J'ai réussi à le faire fonctionner. Donner cette un coup, il fonctionne avec jQuery 1.6 et jQuery UI 1.8:

HTML:

<div id="checkout"> 
    <h2><a href="#">Section 1</a></h2> 
    <div> 
     <form action="#"> 
      <h3>Content</h3> 
      <input type="submit" class="next" value="Continue" /> 
     </form> 
    </div> 
    <h2><a href="#">Section 2</a></h2> 
    <div> 
     <form action="#"> 
      <h3>Content</h3> 
      <input type="submit" class="prev" value="Back" /> 
     </form> 
    </div> 
</div> 

jQuery:

<script type="text/javascript"> 
    $(document).ready(function() { 
     // create new accordion 
     var checkout = $('#checkout').accordion({ event: false }); 

     // assign accordion navigation events to button clicks 
     $('form', checkout).each(function (index) { 
      $(this) 
      .children(':submit') 
      .filter('.next, .prev') 
      .click(function() { 
       checkout.accordion('option', 'active', index + ($(this).is('.next') ? 1 : -1)); 
       return false; 
      }); 
     }); 
    }); 
</script> 

Answer 2

Avez-vous essayé de faire exactement comme dans l'exemple?

var wizard = $("#accordion").accordion({ 
    header: 'h3.header', 
    event: false 
}); 

$("h3.header", wizard).each(function(index) { 
    $(this) 
    .next() 
    .children(":button") 
    .filter(".next, .previous") 
    .click(function() { 
     wizard.changeAccordion("activate", index + ($(this).is(".next") ? 1 : -1)) 
    }); 
}); 

Answer 3

Je cherchais une solution au même problème et arriver à ce (je travaille avec jQuery et jQuery UI 1.4.2 1.8.1):

<div id="wizard"> 
    <h3><a href="#step1">Step 1/3</a></h3> 
    <div id="step1"> 
     <button type="button">Next &raquo;</button> 
    </div> 
    <h3><a href="#step2">Step 2/3</a></h3> 
    <div id="step2"> 
     <button type="button">Next &raquo;</button> 
    </div> 
    <h3><a href="#step3">Step 3/3</a></h3> 
    <div id="step3"> 
     <button type="submit">Finish</button> 
    </div> 
</div> 

Et c'est le script:

<script type="text/javascript"> 
    $(function() { 

     $('#wizard').accordion(); 

     $('#wizard :button').each(function (index, elm) { 
      $(elm).click(function() { 
       $('#wizard').accordion('activate', index + 1); 
      }); 
     }); 

    }); 
</script> 

Answer 4

essayez ceci:

var wizard = $("#register_form").accordion({ 
    header: '.title', 
    event: 'none', 
    collapsible: false 
}); 
$(':button.previous').click(function() { wizard.accordion("activate", 0); }); 
$(':button.next').click(function() { wizard.accordion("activate", 1); }); 

Où :button sont les boutons prev et next, et wizard est votre accordéon jQuery. Ne tirez pas tous les autres codes. Voyez si cela fonctionne. S'il vous plaît laisser des commentaires, merci.

Answer 5

J'ai eu un problème similaire et utilisé:

<button onclick="$('#accordion').accordion('activate', 0);">Prev</button> 
<button onclick="$('#accordion').accordion('activate', 2);">Next</button> 

sur chaque volet d'accordéon. Ceci est sur le 2ème volet et vous ramène à la première (index de 0) ou à la troisième (index de 2).

Answer 6

Ajouter à votre fichiers jQuery. Il ajoute une fonction $ ("# accordéon"). Accordéion ("next") et une option, "loopOnNext" (par défaut false) pour le forcer à revenir à la première case quand c'est à la fin.

$.extend($.ui.accordion.prototype, { 
    next: function(){ 
     var index = this.option('active') || 0, 
      next = index + 1, 
     nodes = $(this.element).children('h3').length; 
     if(next >= nodes && this.option('loopOnNext') === true) { 
      next = 0; 
     } 

     return this.activate(next); 
    } 
});