JQuery Accordion Help: Closing Active Panel

I am new to JQuery Accordions and would like to keep the selected active panel open when navigating through the content. I have four areas in the accordion and each area has multiple links below. When I click on a link, it collapses the panel and defaults back to the first panel and opens it.
I would like it to stay open in the active panel. I am using Dreamweaver CC and the code is below:
$(function() {
$( "#Accordion1" ).accordion({
active:true,
animate:{duration: 1},
icons:{header: "ui-icon-plusthick", activeHeader: "ui-icon-minusthick"},
heightStyle:"content",
collapsible:true,
And an example of the site: http://training.getfueledservices.com/FEC/SelfPayParent/SelfPayOverview01.html
Basically when I click on any of the content in panels 2, 3, or 4, it reverts back to the first panel.
Thank you for your help and time.

On the page you link to change the 'active: X' state - so for the 'Peak Office' page change it to - active: 1, - Peak Classroom page change to - active: 2, see if that works.
<script type="text/javascript">
$(function() {
$( "#Accordion1" ).accordion({
active: 1,
animate:{duration: 1},
icons:{header: "ui-icon-plusthick", activeHeader: "ui-icon-minusthick"},
heightStyle:"content",
collapsible:true,
</script>

Similar Messages

Jquery accordion how to collapse panel by default

Hi I am using the latest Dreamweaver how do I collapse the panel so that none are open when the page first opens?

mayramoca33 wrote:
collapsibleType: Boolean
Default: false
Whether all the sections can be closed at once. Allows collapsing the active section.
Code examples:
Initialize the accordion with the collapsible option specified:
1
$( ".selector" ).accordion({ collapsible: true });
Get or set the collapsible option, after initialization:
1
2
3
4
5
// getter
var collapsible = $( ".selector" ).accordion( "option", "collapsible" );
// setter
$( ".selector" ).accordion( "option", "collapsible", true );
HI Nancy I see this
and I click on collapsible in property panel and it give me this:
<script type="text/javascript">
$(function() {
$( "#Accordion1" ).accordion({
heightStyle:"content",
animate:{easing: "swing"},
collapsible:true
</script>
But I can't figure out how to collapse the first panel
http://restoring-health.net/resources.html
Try the following:
<script>
$(function() {
$( "#Accordion1" ).accordion({
active: false,
collapsible: true,
heightStyle:"content",
animate:{easing: "swing"},
</script>

Accordion and fixed active panel

Hello
How could I fix the active accordion (defaultPanel: 2) panel
to keep it open when I navigation with mouseover function on the
other panel?
Related link for the onmouseover JS:
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72&catid=602&threadid =1282158&highlight_key=y&keyword1=mouseover
Thx for your help.
Dom

I use the IPTC description for every photo, but clicking to edit it with a mouse is inconvenient. Is there a keyboard shortcut?
Longstanding wish for me also, I'm afraid you can only switch to next field in the panel itself with tab but you first have to select the description field once otherwise Tab gives you the light table view of the content window.
Here is shortcut list for Bridge to check yourself:
http://kb2.adobe.com/community/publishing/909/cpsid_90922/attachments/Adobe_Bridge_keyboar d_shortcuts.pdf
And I assume you are aware of creating a metadata template and add same info for multiple selected files?

How can I make a jQuery accordion panel tab collapsed by default?

I have Googled this and saw that someone recommended placing the 'collapsible' option before the 'active' one. For example,
$( ".accordion" ).accordion("option", {
collapsible: true,
active: false
I am completely new to Dreamweaver. I inserted a jQuery UI Accordion into my web page because I need a drop-down list. I have a main .css file for my page. Additional jquery css files were added after I inserted the accordion. (For example, I see jquery.ui.core.min.css, jquery.ui.theme.min.css, jquery.ui.caccordion.min.css, jquery-1.8.3.min.js, jquery-ui-1.9.2.accordion.custom.min.js).
I see a section in jquery-ui-1.9.2.accordion.custom.min.js where I think I might be able to change these settings, but I just want to make sure.
options:{active:0,animate:{},collapsible:!1,event:"click"
Thanks in advance for any suggestions.

Yes, setting collapsible to true (so all sections can collapse at once) and then setting no section as active, it will start completely collapsed, e.g.:
$( ".accordion" ).accordion({collapsible:true,active:false});
Do note this is being applied to a container element with the "class" of 'accordion' and not the ID, per your code. If it's ID then use:
$( "#accordion" ).accordion({collapsible:true,active:false});

Accordion Tabs Closed on Page Load

How would I fix this page so all the accordions are closed on page load? I don't want the first tab to be open when a viewer opens the page.
Link is http://thedenovo.worldsecuresystems.com/solutions.html

If you use jQuery UI Accordion Widget, set Active to false.
http://api.jqueryui.com/accordion/
Nancy O.

Accordion help please

hi can any one help me with the accordion in dreamweaver cs3.
i want to use an mouseover effect but can noe get it to work.
have looked at other threads on this forum. but no joy.
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72&catid=602&threadid =1282158&enterthread=y
have tried both methods
<div class="AccordionPanelTab"
onmouseover="Accordion1.openPanel(0);">Label 1</div>
But you can get the MouseOver by modifying the
spryaccordion.js.
Search for
Spry.Widget.Accordion.prototype.onPanelTabMouseOver =
function(panel)
and copy/paste the onClick functions:
if (panel != this.currentPanel)
this.openPanel(panel);
this.focus();
... it should look like this:
Spry.Widget.Accordion.prototype.onPanelTabMouseOver =
function(panel)
if (panel != this.currentPanel)
this.openPanel(panel);
this.focus();
if (panel)
this.addClassName(this.getPanelTab(panel), this.hoverClass);
but wont work for me.
the script that i am using is just the standard the
dreamweaver makes. any help would be great.
thanks shaun

There is a space that should not be there
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-mig rate.min.js"></script>
should be
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox- 1.3.4.pack.min.js"></script>
shouild be
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.easing-1. 3.pack.js"></script>
should be
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.easing-1.3.pack.js"></script>

Problem with Accordion Widget INSIDE Sliding Panel Widget

Hello,
perhaps I should not do this, but I nested an Accordion
Widget inside a Sliding Panels Widget:
- There are eight Panels.
- Each one contains a complete Accordion.
The sliding works fine, and so does the Accordion animation,
but the text inside the Accordion Panel Tabs won't move along, when
a tab is activated. I need to hover the mouse over the accordion to
make the panel texts appear again.
Of course, when I un-nest the widgets and move the Accordion
widget out of the Sliding Panel widget, everything is fine.
My question is:
- am I demanding "too much" by nesting the widgets?
- or should this basically work, and the problem arises from
rivalling scripts?
Here is a link:
Nested
widgets Test
The horizontal top menu will activate the sliding panels, but
as of now only the leftmost menu item contains an Accordion (I know
the CSS does not look nice yet).
Is there anything I can optimise to get this to work?
Thank you so much,
Greetings, Jensen
Edit: The problem does NOT occur in Firefox, but in
Safari.

Hi John,
That is the expected behavior if the "Overlap items below" is unchecked. Please refer to the following link http://screencasteu.worldsecuresystems.com/aish/2013-08-21_1947.png. If you don't want the page to wiggle up and down, please check the box shown in the screenshot.
Regards,
Aish

Opening first tab of jquery accordion when page loads

Hello, I am wondering how I would make the first tab of my accordion to open when the page loads. It is a custom accordion and therefore it is hard to find the answer online.
I want this to be specific to a certain page if possible rather than universal across the site.
Here is the HTML:
<div id="st-accordion" class="st-accordion">
                    <ul>
                        <li>
                            <a href="#">Lorem ipsum<span class="st-arrow">Open or Close</span></a>
                            <div class="st-content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consequat auctor ante, sodales pretium felis auctor in. Aenean tempor, orci vel vestibulum lobortis, justo augue laoreet turpis, id consectetur dolor arcu sed arcu. Sed id dolor tellus. Nulla eros risus, sollicitudin in ultricies ac, tincidunt et nisl. Nam ac consectetur est. Morbi pretium libero in lacus semper ultricies. Vestibulum in nibh a ligula malesuada posuere ac vel lorem. Duis varius scelerisque vehicula. Maecenas convallis tellus in tellus facilisis eget sollicitudin est lacinia. Ut quam tortor, pretium non lacinia sit amet, iaculis ac ipsum. Donec quis libero accumsan felis fringilla pulvinar eget in leo.</p>
                            </div>
                        </li>
                        <li>
                            <a href="#">Lorem ipsum<span class="st-arrow">Open or Close</span></a>
                            <div class="st-content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consequat auctor ante, sodales pretium felis auctor in. Aenean tempor, orci vel vestibulum lobortis, justo augue laoreet turpis, id consectetur dolor arcu sed arcu. Sed id dolor tellus. Nulla eros risus, sollicitudin in ultricies ac, tincidunt et nisl. Nam ac consectetur est. Morbi pretium libero in lacus semper ultricies. Vestibulum in nibh a ligula malesuada posuere ac vel lorem. Duis varius scelerisque vehicula. Maecenas convallis tellus in tellus facilisis eget sollicitudin est lacinia. Ut quam tortor, pretium non lacinia sit amet, iaculis ac ipsum. Donec quis libero accumsan felis fringilla pulvinar eget in leo </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                                        $('#st-accordion').accordion({
                                                  oneOpenedItem          : true
        </script>
                    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="js/jquery.accordion.js"></script>
            </div>
And the CSS:
.st-accordion{
    width:100%;
    min-width:270px;
    margin: 0 auto;
}.st-accordion ul li{
    height: 100px;
    border-bottom: 1px solid #c7deef;
    border-top:1px solid #fff;
    overflow: hidden;
.st-accordion ul li:first-child{
    border-top:none;
.st-accordion ul li > a{
    font-family: 'Josefin Slab',Georgia, serif;
    text-shadow: 1px 1px 1px #fff;
    font-size: 22px;
    display: block;
    position: relative;
    line-height: 100px;
    outline:none;
    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
.st-accordion ul li > a:hover{
    color: #1693eb;
.st-accordion ul li > a span{
    background: transparent url(../images/down.png) no-repeat center center;
    text-indent:-9000px;
    width: 26px;
    height: 14px;
    position: absolute;
    top: 50%;
    right: -26px;
    margin-top: -7px;
    opacity:0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
.st-accordion ul li > a:hover span{
    opacity:1;
    right: 10px;
.st-accordion ul li.st-open > a{
    color: #1693eb;
.st-accordion ul li.st-open > a span{
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    transform:rotate(180deg);
    right:10px;
    opacity:1;
.st-content{
    padding: 5px 0px 30px 0px;
.st-content p{
    font-size: 16px;
    font-family: Georgia, serif;
    font-style: italic;
    line-height: 28px;
    padding: 0px 4px 15px 4px;
.st-content img{
    width:125px;
    border-right:1px solid #fff;
    border-bottom:1px solid #fff;
@media screen and (max-width: 320px){
    .st-accordion ul li > a{
        font-size:14px;
@media screen and (max-width: 800px){
    .st-accordion ul li > a{
        font-size:16px;
You can find the page at http://bit.ly/Zrpt1s
Any help is grately appreciated thanks!

Try
$(function() {
    $('#st-accordion').accordion({
        oneOpenedItem    : true,
       open: 0

Jquery Accordion as menu problem

I implemented Jquery accordion as a menu. I have following setup for the accordion menu (page template body region position 3, column 1):
MENU 1
¦_ Link to report 1
¦_ Link to report 2
MENU 2
¦_ Link to report 3
¦_ Link to report 4
On page template body region position 3, column 2 .... I have the Jquery Tab to shows the selected report according to the accordion menu selection.
At initial page loading, MENU 1 is expanded and MENU to is collapse...this is OK.
Then user clicks on the MENU 2, immediately the MENU 1 collapsed and MENU 2 expanded and shown the "Link to report 3" and "Link to report 4".
But when user clicks on the "Link to report 3", the page is refresh / submitted and the Jquery tab on column 2 showing the correct report but the accordion MENU 1 is expanded and MENU 2 is collapsed.
How can I make: when user clicks on menu item (Link to report 3 or Link to report 4) of MENU 2, the MENU 2 still expanded and MENU 1 is still collapsed?

Hello,
You can programitacally open the right tab. Here is the code I use on http://anychart.apex-evangelists.com (the menu on the left is an accordion)
<script type="text/javascript">
$(function() {
    $('#accordion').accordion({
      header: 'h3',
      active: '.selected',
      selectedClass: 'active'
</script>Regards,
Dimitri
http://dgielis.blogspot.com/
http://www.apex-evangelists.com/

Apex textarea inside jquery accordion

hello,
can anyone please help me how to include a apex textarea inside jquery accordion.

i used jquery accordion i just copy n paste this code into my apex application.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.accordion.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#accordion").accordion();
</script>
</head>
<body style="font-size:62.5%;">
<div id="accordion">
     <h3>Section 1</h3>
     <div>
          <p>
          Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
          ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
          amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
          odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
          </p>
     </div>
     <h3>Section 2</h3>
     <div>
          <p>
          Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
          purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
          velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
          suscipit faucibus urna.
          </p>
     </div>
     <h3>Section 3</h3>
     <div>
          <p>
          Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
          Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
          ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
          lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
          </p>
          <ul>
               <li>List item one</li>
               <li>List item two</li>
               <li>List item three</li>
          </ul>
     </div>
     <h3>Section 4</h3>
     <div>
          <p>
          Cras dictum. Pellentesque habitant morbi tristique senectus et netus
          et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
          faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
          mauris vel est.
          </p>
          <p>
          Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
          Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
          inceptos himenaeos.
          </p>
     </div>
</div>
</body>
</html>
i am getting the accordion but i need to put textarea areas in each section.when i create a text area i m not able to see any region in accordion.

Start Accordion all closed

I am putting in an accordion and want all panels to start as closed. All the info I can find is about setting the default open panel. I don't want a default open panel; I want all panels closed to start. Can this be done?

http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#AllPanelsCl osed

Jquery Accordion menu problem

I have create jquery accordian menu as per Patrick Wolf post. I have following setup for the accordion menu (page template body region position 3, column 1):
MENU 1
¦_ Link to report 1
¦_ Link to report 2
MENU 2
¦_ Link to report 3
¦_ Link to report 4
At initial page loading, MENU 1 is expanded and MENU to is collapse...this is OK.
Then user clicks on the MENU 2, immediately the MENU 1 collapsed and MENU 2 expanded and shown the "Link to report 3" and "Link to report 4".
But when user clicks on the "Link to report 3", the page is refresh / submitted and the Jquery tab on column 2 showing the correct report but the accordion MENU 1 is expanded and MENU 2 is collapsed.
How can I make: when user clicks on menu item (Link to report 3 or Link to report 4) of MENU 2, the MENU 2 still expanded and MENU 1 is still collapsed?

Hello,
You can programitacally open the right tab. Here is the code I use on http://anychart.apex-evangelists.com (the menu on the left is an accordion)
<script type="text/javascript">
$(function() {
    $('#accordion').accordion({
      header: 'h3',
      active: '.selected',
      selectedClass: 'active'
</script>Regards,
Dimitri
http://dgielis.blogspot.com/
http://www.apex-evangelists.com/

Need help in activation a license key in CCT. It works as a trial now

Need help in activation a license key in CCT. It works as a trial now

1st the sata drive cannot be listed as a slave drive to the ide master [key word=ide-can be configured as master OR slave, master IF only 1 hd, master and slave IF 2 hds], on the sata controler you can have master and slave, the ide cable has two connectors for the hds, sata has only 1 hd connector.
are you wanting to install the sata as primary master and move the operating sys to that drive, if so you will need an IMAGING software to move an operating system OR you could do a fresh operating system install to the sata drive then install your programs.

Jquery accordion where we can open more than one region at the same time

Hi,
I am trying to create a jquery accordion where we can open more than one region at the same time. I saw a post
from patrick to do accordion where we can select only one region at a time.I am using Apex 4.0
Using jQueryUI Accordion with APEX 4.0
Any input on this will be appreciated.
Thanks,
Nav

Hi,
As I understand jQuery UI accordion do not have feature you looking for
Regards,
Jari
Edited by: jarola on Sep 7, 2010 12:29 PM
See documentation from here
http://jqueryui.com/demos/accordion/#default

Queries regarding Year End Closing Activity

Hi Experts/Moderator,
I need solution to my queries regarding Year End Closing Activity?
1. How can we post adjustment entries to GL/AR/AP/BANK/ASSET accounts in the previous FYu20192008 in Apr/May/Jun/Julyu20192009 using Special Posting Periods, if already balances are carrying forwarded to next FY 2009? What effects on the Opening Balances already carry forwarded?
2. Can we run the Asset Depreciation for the previous FY 2008 in Apr/May/Jun/Julyu20192009 using Special Posting Periods, if already balances are carrying forwarded to next FY 2009? What effects on the Opening Balances already carry forwarded?
Thanks & Regards
Chandra

Hi,
You can carryforward the balance of GL, AP & AR. System is automatic updated the balance in current fiscal year if you pass the adjustment entries in previous fiscal year 2008 using special period. You can also run the deperciation.
Regards,
Pankaj

JQuery Accordion Help: Closing Active Panel

Similar Messages

Maybe you are looking for