Avatar of chipsterva69
chipsterva69
 asked on

jQuery Accordion - links in content to open next panel/different panel

Good day!  I am putting together a 4-panel accordion function for a web page and am using the code below.  I want to add a button/link at the end of each page that allows the user to proceed to the next panel/go back to the previous (my demographic isn't the most tech savvy and I am afraid assuming that they know to click on the headers may be erroneous).

// accordion code
<ul id="accordion1" class="accordion">
    <li>
        <div class="handle">Attendee</div>
        <div class="panel loading">
            <p class="maintext">
                    content 1
                    </p>
        </div>
    </li>
    <li>
        <div class="handle">Assistant</div>
        <div class="panel loading">
            <p class="maintext">content 2</p>
                  
        </div>
    </li>
    <li>
        <div class="handle">Spouse/Guest</div>
        <div class="panel loading">
            <p class="maintext">content 3</p>
        </div>
    </li>
    <li>
        <div class="handle">Additional Guests</div>
        <div class="panel loading">
            <p class="maintext">content 4</p>
        </div>
    </li>
</ul>

// scripts, params, etc.

<script type="text/javascript" src="css/jquery-1.4.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="css/jquery.accordion.2.0.js" charset="utf-8"></script>
<script type="text/javascript">
            $('#accordion1').accordion({
                handle: ".handle", // Default: "h3"
    			panel: ".panel", // Default: ".panel"
    			//speed: 500,  Default: 200
    			easing: "swing",  // Default "swing"
    			canOpenMultiple: true, // Default: false
    			canToggle: true, // Default: false
    			activeClassPanel: "open", // Default: "open"
    			activeClassLi: "active", // Default: "active"
    			lockedClass: "locked", // Default: "locked"
    			loadingClass: "loading" // Default: "loading"
            });
			$(".loading").removeClass("loading");
</script>

Open in new window


I am using code from http://projects.timhuegdon.com/jquery-accordion/, with some adjustments.  What I am hoping to add is something like what is found in Spry - http://livedocs.adobe.com/en_US/Spry/SDG/WSE03B96F0-A409-4dc0-830E-EA05F91492D7.html.

Thanks in advance for any assistance!!
jQuery

Avatar of undefined
Last Comment
leakim971

8/22/2022 - Mon
leakim971

Ok so add a class to each of the buttons/links, for example : openNext -> class="foo blabla openNext"
$("#accordion1 .openNext").click(function(evt) {
     evt.preventDefault();
     var currentPanel = $(this).closest(".panel").closest("li");
     var index_currentPanel = $("#accordion1>li").index(currentPanel);
     var nextPanel = $("#accordion>li:eq("+(1+index_currentPanel)+")");
     var nextHandle = nextPanel.find(".handle");
     nextHandle.trigger("click");
});

Open in new window


If that don't work, please setup a test page with your current code here : http://jsfiddle.net/
OR just provide a test page to see it... if available...
chipsterva69

ASKER
I plugged in the code and made the class addition, but no luck.

Test page - please excuse some of the other coding issues (alignment, spacing) - still a work in progress.

Thanks much in advance!
leakim971

there's lot of issue, you did not made a copy/paste of my code
remove the onclick attribute to your button it's wrong coding and useless
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
chipsterva69

ASKER
I didn't copy/paste the code?  My apologies, I thought I did - code lines 165-172.  The only alteration I made on the code your sent was remove the space between accordion1 and .openNext.  I am more than happy to add it back in, but it did not appear the change the result.

I removed the onClick attribute - same result.
ASKER CERTIFIED SOLUTION
leakim971

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
chipsterva69

ASKER
Bingo - that did it.  My apologies for altering the code the first time through.  When it didn't work, I went looking for what appeared to be simple typing mistakes.  I don't know jQuery well enough to know when a space is warranted or not.

And you read my mind - adding the closing current panel line of code.

Thanks!
chipsterva69

ASKER
Short and sweet solution, and posted on a weekend to boot!!  Thanks a million, leakim971.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
leakim971

without the space you just select an element with ID equal to "accordion1" AND with a class equal to "openNext" when instead we want to select an element with class "openNext" INSIDE the element with the ID "accordion1"
chipsterva69

ASKER
BTW - once I understood what the code was doing, it was easy to create a prevPanel function:
$("#accordion1 .openPrev").click(function(evt) {
evt.preventDefault();
var currentPanel = $(this).closest(".panel").closest("li");
currentPanel.find(".handle a").click();// uncomment this line to close current panel
var index_currentPanel = $("#accordion1>li").index(currentPanel);
var prevPanel = $("#accordion1>li:eq("+(index_currentPanel-1)+")");
var prevHandle = prevPanel.find(".handle a");
prevHandle.trigger("click");
});

Open in new window


and an openFirst function:
$("#accordion1 .openFirst").click(function(evt) {
evt.preventDefault();
var currentPanel = $(this).closest(".panel").closest("li");
currentPanel.find(".handle a").click();// uncomment this line to close current panel
var index_currentPanel = $("#accordion1>li").index(currentPanel);
var firstPanel = $("#accordion1>li:eq("+0+")");
var firstHandle = firstPanel.find(".handle a");
firstHandle.trigger("click");
});

Open in new window


Thanks again, leakim971 - very much appreciated!
chipsterva69

ASKER
without the space you just select an element with ID equal to "accordion1" AND with a class equal to "openNext" when instead we want to select an element with class "openNext" INSIDE the element with the ID "accordion1"

Thanks for clarifying!  Makes sense now.  Sorry about trying to be "helpful"!
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
chipsterva69

ASKER
Quick followup question - I am adding some more functionality to the form (gotta love feature creep!) and now using jquery-1.10.2.js, but the button functionality is now broken.  Any thoughts on what I should look at to correct?

Test page

Thanks in advance!
leakim971

You should create a new question, don't hesitate :-)