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/

Similar Messages

Using Spry Accordion as menu problem

I am using the Spry Accordion widget as a menu/table of contents in a website and have encountered an issue that needs customization that I cannot seem to find anywhere.
Here is the link: http://2ndlookgraphics.com/slProfile/index.html
I have placed the menu in an iframe with links pointing to "parent" which seems to work well.
My problem is that whenever a link is clicked in any other than the first panel the menu reverts to the opening stance with te first panel open.
I would like, if possible to have the the panel that is currently being accessed to stay open until another tab is opened.
If this is not possible it would be best if the first panel were initially closed and if the accordian effect would initiate on hover rather than click.
I am using a "Fluid Grid" responsive layout but that does not seem to be affecting this issue.
I would appreciate some advice on this please.

All panels closed -
<script type="text/javascript">

</script>
More here:
http://adobe.github.io/Spry/articles/data_api/apis/accordion.html

Spry menu problem - CS6 Dreamweaver

I wonder if anyone can help me with my spry menu problem which I have with a fixed 960px wide horizonal menu bar that has 8 items in it. The sub-menus don't seem to display properly when you click on them in that some of the submenus only show up at the end of the menu bar itself in Explorer browsers 8/9. Does anyone know of any code I can apply to fix this problem? I am new to spry menu features and so any help would be very much appreciated.

Also validate the rest of the code in your pages to see if you have any critical errors that need fixing. For example, a missing doc type declaration might explain Spry failures.
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
As an FYI, Adobe abandonded the Spry Framework late last year, after CS6 was released because Spry drop-menus don't hold up well on touch screen devices. If you can't get satisfaction with Spry, try jQuery Superfish. It's a better menu system.
http://users.tpg.com.au/j_birch/plugins/superfish/
Nancy O.

Spry Horizontal Menu Problem

I switched to version 2 of the Spry Menubar due to sub-menu problems associated with iPads. Now I am having problems with sub-menus within IE8. It is not possible to *quickly* scroll down the menu without the sub-menu disappearing. Here is an example:
http://gerberanalytics.com/tennis/tennis_header_test.php
It works ok with CS6 in the design view, but not on the local test server or on the production server. Any ideas?
Thanks in advance for your help.

Gramps,
I appreciate you providing this. I took a closer look at the errors and I made a few changes but this validator service continued to kick out errors. In fact if you put Adobe's own web site into this application (http://www.adobe.com), it comes up with 44 errors. As I mentioned before, the Adobe Widget Browser application for Spry Menubar 2 is essentially creating my code so I doubted that this was an actual problem.
While I have been interacting with you, I have also been awaiting an update from Adobe's senior technology staff for a solution. I heard from them today. Here is what Adobe said: Spry Menubar 2 has problems with IE 8 and IE 9 (which I already knew). The first person with whom I spoke at Adobe suggested that my customers running the IE 8 and IE 9 browsers should switch to a different browser, such as Chrome. I explained that asking users to switch was not a solution -- that's about 35% of my users. I then asked to speak with a manager / supervisor.
My conversation with the supervisor went a bit better. He told me that those running IE 8 and IE 9 on a Windows XP machine are ok. Vista is a problem. Windows 7 is also iffy. My machine is a Vista and my wife's machine is a Windows 7. It does not work on either machine for us.
I told him that Spry Menubar 2 should be withdrawn from their site or there should be a warning to insure that people are aware of the problems. He didn't say that they would do that. He suggested that I should check back with him in a couple of weeks. I did not get a warm and fuzzy feeling that this was a priority item for them.
At this point, I'm bailing on Spry Menubar 2. I may return to Spry Menubar 1.6 which requires a "double tap" on the nav buttons to work on an iPad. I may also check out jQuery.
Thanks for the suggestions but it looks like Adobe has some serious issues. If your customers are using iPads (and they are), Spry Menubar 2 is not a solution to fix the problems encountered in Spry 1.4 and Spry 1.6.
Scott

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

Menu problem with IE

menu problems with IE connected with spry - see site:
1.
http://www.whatwomenwant-tv.com/index.html
(horizontal menu bar - will not display fully, probably to do with
flash)
2.
http://www.whatwomenwant-tv.com/about.html
(horizontal menu bar swerves to the left)
3.
http://www.whatwomenwant-tv.com/streetinterviewswomen.html
(vertical menu bars in questions are all over the page)
thanks 4 help.

I tried in Firefox 3 and IE7 and they both seemed fairly slow
for any action to take place. But IE7 did seem pretty slugish.
It seems that you're already determined what the issue is,
you have waaaaaay too many menu items. Seems to me that that number
of items don't belong in a menu. There are even menus that are too
long to appear entirely on the page, so they can't be easily
accessed without accidentally hiding the menus again, which I did
several times. IN particular:
Cartuchos > Technologica
If you cannot change to a different format to show all of the
items, then perhaps you can split up the menu so that you don't
have too many at one time. I checked the code of your page and it
seems that you've got a lot of other scripting going on there
besides Spry, so is the issue with Spry or with everything else
you're trying to do with that menu. If you can try to recreate the
page with only the menu items on it (and not pulled in dynamically
on the fly), and then add back to your page a bit a time, you might
be able to find out what is really causing the delays.

Context menu problem in ADF 11g

Hi All,
A context menu problem puzzle me. Following is the source,
=======================================
<af:tree id="tree" value="#{treeTest.collectionModel}" var="node"
contentDelivery="immediate"
disclosedRowKeys="#{treeTest.treeDisclosedRowKeys}"
rowDisclosureListener="#{treeTest.rowDisclosureListener}"
rowSelection="single">
<f:facet name="nodeStamp">
<af:group id="g1">
<af:image source="/image/#{node.treeLevel}.jpg" id="i1"
inlineStyle="width:16px; height:16px; vertical-align:middle;"/>
<af:outputText id="ddl" value="#{node.name}">
<af:showPopupBehavior popupId="myPopup" triggerType="contextMenu"/>
</af:outputText>
</af:group>
</f:facet>
<f:facet name="contextMenu">
<af:popup id="myPopup" popupFetchListener="#{treeTest.popupListener}"
contentDelivery="lazyUncached">
<af:switcher id="s1" facetName="#{treeTest.level}">
<f:facet name="1">
<af:menu text="menu 1" id="m1">
<af:forEach items="#{treeTest.menuItems['0']}" var="menuItemss">
<af:commandMenuItem text="#{menuItemss.name}"
actionListener="#{bindings.onNodeClicked.execute}"
disabled="#{!bindings.onNodeClicked.enabled}">
</af:commandMenuItem>
</af:forEach>
</af:menu>
</f:facet>
<f:facet name="2">
<af:menu text="menu 2" id="menu1">
<af:forEach items="#{treeTest.menuItems['1']}" var="menuItemss">
<af:commandMenuItem text="#{menuItemss.name}"
actionListener="#{bindings.onNodeClicked.execute}"
disabled="#{!bindings.onNodeClicked.enabled}">
</af:commandMenuItem>
</af:forEach>
</af:menu>
</f:facet>
</af:switcher>
</af:popup>
</f:facet>
</af:tree>
========================================================
I want to get the commandMenuItem tag's information, i use following code in onNodeClicked method try to get it,
FacesContext facesContext =FacesContext.getCurrentInstance();
ELContext elContext = facesContext.getELContext();
ExpressionFactory expressionFactory =facesContext.getApplication().getExpressionFactory();
ValueExpression exp =expressionFactory.createValueExpression(elContext,"#{menuItemss.name}", Object.class);
but the exp is null.
Please help me to solve this problem.
Thank you very much.
Edited by: Yitao Li on Dec 4, 2009 1:06 PM

You might need a #
ValueExpression exp =expressionFactory.createValueExpression(elContext,"#{menuItemss.name}", Object.class);

Sudden menu problem in CS4: Running OS10 Mavericks. Anyone got a clue?

Cannot keep history and layers windows open simultaneously. Others likewise. By sudden I mean, one day it's fine, the next there's a menu problem. Assistance appreciated.

If you have placed your layout the way you want it, use the Save Workspace, give it a name, and only check Palette location in the Save dialog.
Then switch to another Workspace and back to your saved workspace to see if that fixes the problem.
Last resort is to reset Prefs. Hold down ctrl-alt-shift, start Photoshop and agree to the reset.
Gene

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

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.

How can I stick an accordion navigation MENU on top of a mobile scrolling page and make it work properly? As I can't pin it, I keep it on top of the page with scroll effect 0. It collapse, shows the menu buttons but doesn't close back once it reaches the

How can I stick an accordion navigation MENU on top of a mobile scrolling page and make it work properly?
As I can't pin it, I keep it on top of the page with scroll effect 0.
It collapse, shows the menu buttons but doesn't close back once it reaches the anchorpoint.

Muse won't let you, at least not that I know of. You could find the class in the code that muse gives it position: fixed…I think. You could paste it into the head area of your page properties to override the class. I believe something like this would give you persistent nav bar, pinned at the very top, on mobile:
#youmuseclass {position: fixed;}
I wouldn't use any parallax on mobile either, the performance is terrible.

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/

Accordion menu problem. Doesn't move.

Hello!
Here are files I've modified.
http://failiem.lv/u/jhqapxy
I was making an accordion menu after this tutorial.
http://www.thetechlabs.com/xml/build-a-dynamic-accordion-menu-in-flash-cs4-with-actionscri pt-30-and-xml/
In basic tutorial there is extra part of button where you add menu name "home, about us" etc.
But I don't need this. I needed more simplier. From xml file I load an image or swf. And then you just mouse over it and it moves and it clicks. No extra 30 pixels for button space.
If i change AS line
ldr.x=0
to ldr.x=27
then it moves, but there is extra unnecessary empty space between content things. I don't need it. What should I do?
I'm total beginer at these things, but I really need this thing.

You need to find where the space between is being added. If you include the relevant code in your posting you are more likely to get help. Also, probiding screenshots to show the problem you want to solve can be helpful.
People are generally not too keen about chancing downloading files and researching tutorials or other external information when trying to help in forums.

Accordion menu problem

Dear all,
I have a website, i want to place a image right side of accordion menu how can i do it (RED AREA)
WebLink

Firstly, please accept my apologies, I did not study the problem to the extent that the solution I gave solved the problem.
Please undo the changes above and add a new column that spans the height of the tabel as per
<tr>
<td width="33%"><b>Your Name*:</b></td>
<td width="3%"> </td>
<td width="4096" colspan="2"><input type="text" name="yourname" /></td>
<td rowspan="17"><img style="margin-left: 50px;" name="" src="http://www.newtonclients.com/sky3/images/bo.png" width="210" height="275" alt="" /></td>
</tr>
Gramps

Accordion menu problem xcelsius 2008 SP3

Hi all
When i try and use the accordion menu in xcelsius 2008 SP3 i get the following screen and unable to edit any of details in the normal way.
[http://img251.imageshack.us/img251/7374/acct.jpg]
can anyone help with this issue??
thanks,
Lee

Hi Lee
Do you have any Add-Ons installed which could be conflicting with the accordion menu?
Thanks
Charles

Jquery Accordion as menu problem

Similar Messages

Maybe you are looking for