Link to home
Start Free TrialLog in
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!!
Avatar of leakim971
leakim971
Flag of Guadeloupe image

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...
Avatar of chipsterva69
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!
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
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
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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!
Short and sweet solution, and posted on a weekend to boot!!  Thanks a million, 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"
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!
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"!
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!
You should create a new question, don't hesitate :-)