Jquery accordion, suivante et précédente de l'assistant, comment obtenir précédent et suivant des sections?

J'ai un accordéon Jquery qui fonctionne très bien. Les Sections obtenir étendue/effondré lorsqu'il est cliqué sur les en-têtes respectifs. Mais je veux ajouter la fonctionnalité de sorte que lorsque je clique sur "next" bouton, il ouvre la section suivante et en cliquant sur "Précédent" me ramène à la section précédente.

Ce qui a été fait sur cette page http://jquery.bassistance.de/accordion/demo/?p=1.1.2 (dernier exemple) mais vous ne savez pas comment faire pour mettre en place le même dans mon cas.

Des suggestions s'il vous plaît.

Grâce

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>
Pouvez-vous marquer l'une des réponses comme acceptée ou n'en a rien fait de travailler pour vous?
J'ai utilisé JQueryUI Accordéon, plutôt que le code en question aucune des réponses m'ont aidé à l'époque.
jQueriUI Accordéon est le successeur de l'accordéon jQuery plugin. Avec jQueryUI, @johnjelineks solution fonctionne très bien. BTW: Vous pouvez répondre à votre propre question, puis marquez-le comme correcte.

OriginalL'auteur TigerTiger | 2009-09-13

  1. 5

    J'ai été en mesure de l'obtenir pour fonctionner. Donner un coup de cette, 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>
    Très bon, cela fonctionne. Je l'ai utilisé dans une forme plus longue, donc j'ai laissé de côté la forme des balises autour de l'entrée de boutons, et remplacé le $('form', checkout) partie avec $('div', checkout). (Aucun des formulaires imbriqués autorisés en HTML).

    OriginalL'auteur John Jelinek

  2. 4

    Ajouter à vos fichiers jQuery. Il ajoute une fonction $("#accordéon").accordéon("suivant") et une option "loopOnNext" (false par défaut) pour le forcer à revenir à la case du haut quand il 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);
    }
});

    OriginalL'auteur David Souther

  3. 2

    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 accordéon. C'est le 2ème volet et vous ramène à la première (indice de 0) ou de la troisième (indice 2).

    OriginalL'auteur cb20005

  4. 0

    Avez-vous essayé de faire 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)) 
    }); 
});
    J'ai essayé, mais il a donné d'erreur pour changeAccordion fonction (pas trouvé). "Ce plugin est maintenant une partie de jQuery UI et ce version autonome ne sera plus mis à jour. La page restera comme une référence." Donc, je suis juste en utilisant Jquery UI pas les fichiers de ce plugin.

    OriginalL'auteur Vertigo

  5. 0

    J'étais à la recherche d'une solution au même problème et arriver à cela (je suis en train de travailler avec jQuery 1.4.2 et jQuery UI 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>

    OriginalL'auteur Julio César

  6. 0

    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 précédent et suivant, et wizard est votre accordéon jQuery.
    Laissez tous les autres codes. Voir si cela fonctionne.
    Merci de laisser des commentaires, merci.

    Il fonctionne, mais il ne permet de basculer entre le premier et le deuxième volet.

    OriginalL'auteur IzzyCooper