We help IT Professionals succeed at work.
Get Started

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

chipsterva69
chipsterva69 asked
on
1,220 Views
Last Modified: 2014-05-07
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
Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2020
Commented:
This problem has been solved!
Unlock 1 Answer and 12 Comments.
See Answer
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE