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

chipsterva69
chipsterva69 used Ask the Experts™
on
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!!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
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...

Author

Commented:
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!
leakim971Multitechnician
Top Expert 2014

Commented:
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
Exploring ASP.NET Core: Fundamentals

Learn to build web apps and services, IoT apps, and mobile backends by covering the fundamentals of ASP.NET Core and  exploring the core foundations for app libraries.

Author

Commented:
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.
Multitechnician
Top Expert 2014
Commented:
The only alteration I made on the code your sent was remove the space between accordion1 and .openNext.

Yes, it in fact what I'm talking about :)

Line 5, I forgot to add << 1 >> to the accordion ID, it should be :
$("#accordion1>li:eq("+(1+index_currentPanel)+")");
Line 6 we want to click on th anchor not the div, it should be :
var nextHandle = nextPanel.find(".handle a");

$("#accordion1 .openNext").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 nextPanel = $("#accordion1>li:eq("+(1+index_currentPanel)+")");
     var nextHandle = nextPanel.find(".handle a");
     nextHandle.trigger("click");
});

Open in new window

Author

Commented:
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!

Author

Commented:
Short and sweet solution, and posted on a weekend to boot!!  Thanks a million, leakim971.
leakim971Multitechnician
Top Expert 2014

Commented:
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"

Author

Commented:
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!

Author

Commented:
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"!

Author

Commented:
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!
leakim971Multitechnician
Top Expert 2014

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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial