CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Anake.me
Anake.me

Reputation: 467

Accordion Next Button

I have tried searching for what I am trying to accomplish, however I have not found what I am looking for.

I am looking to create a Next and Previous button inside the content of the Spry Accordion provided with Dreamweaver CS6. I have searched the SpryAccordion.js and found this code below:

Spry.Widget.Accordion.prototype.openNextPanel = function()
{
    return this.openPanel(this.getCurrentPanelIndex() + 1);
};

Spry.Widget.Accordion.prototype.openPreviousPanel = function()
{
    return this.openPanel(this.getCurrentPanelIndex() - 1);
};

So I attempted to do this with "#acc-step-1-next" being my "Next" button in Panel 1.

<script>
$(document).ready(function(){
    $("#acc-step-1-next").click(function(){
        Spry.Widget.Accordion.prototype.openNextPanel = function(){
            return ('#Accordian1').openPanel(this.getCurrentPanelIndex() + 1);
        };
    });
});
</script>

I was wondering if doing it this way might make it easy! How would I go about applying this? Would this work or not?

Also, with the "Next" button, could I just make it ".acc-step-next" and use it universally, instead of individually assigning new ID's?

EDIT: Sorry, yes I read your answer incorrectly. I have tried searching for the init property, however have had no success.

This is what starts in the Accordion JS file:

(function() { // BeginSpryComponent

if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};

Spry.Widget.Accordion = function(element, opts)
{
this.element = this.getElement(element);
this.defaultPanel = 0;
this.hoverClass = "AccordionPanelTabHover";
this.openClass = "AccordionPanelOpen";
this.closedClass = "AccordionPanelClosed";
this.focusedClass = "AccordionFocused";
this.enableAnimation = true;
this.enableKeyboardNavigation = true;
this.currentPanel = null;
this.animator = null;
this.hasFocus = null;

this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;

this.useFixedPanelHeights = false;
this.fixedPanelHeight = 0;

Spry.Widget.Accordion.setOptions(this, opts, true);

if (this.element)
    this.attachBehaviors();
};

Which I added this after, but still no luck:

var acc_next = document.getElementById("acc-step-next");
var acc_prev = document.getElementById("acc-step-prev");

$("acc_next").click(function(){
    accordion.openNextPanel();
});
$("acc_prev").click(function() {
    accordion.openPreviousPanel();
});

Upvotes: 4

Views: 188

Answers (1)

Benedikt Langer
Benedikt Langer

Reputation: 527

I have never worked with Spry.Widget.Accordion, but I would try something like the following.

Search for the code, where your accordion is initialized, it should look something like that:

var accordion = new Spry.Widget.Accordion("Accordian1",{});

And add this just below:

$(".acc-step-next").click(function(){
    accordion.openNextPanel();
});

Together it could look something like that:

<script type="text/javascript">
$(document).ready(function(){
    var accordion = new Spry.Widget.Accordion("Accordian1",{});

    // Add a click handler to all buttons with the class 'acc-step-next' (yes you can do that)
    $(".acc-step-next").click(function(){
        // when the button is clicked, call the openNextPanel method of the accordion instance we saved above
        accordion.openNextPanel();
    });
});
</script>

Upvotes: 1

Related Questions