Buttons to open or close accordion panels

I'm using an accordion widget and I would like to put a button or link at the bottom of each content panel, which says 'Continue'. When clicked it should close that panel and open the next one.
Could someone help me with the javascript to do this please? I'm not very good!
Many thanks.

Have you seen this sample?
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#Programatic OpenAndClose

Similar Messages

Open and Close Front Panel of SubVI

Hi all,
Running LabVIEW 2011 on Windows 7 x64. I am trying to get a subVI front panel to open from my main FP with the press of a button and then close with a button press in the subVI. Here is the piece from my main FP that calls the VI and opens the FP
Plots is defined in another loop and all of the loops are in a flat sequence. I did it this way because I want it to start with the first press and not stop my main loop from running. I have moved the item in the left loop around a lot so I'm not sure if I can run that in the same loop as the event or not. Either way opening the VI seems to work fine.
The problem shows up when trying to close the subVI for the SECOND time. The code is here:
As I said, the first time I open and close the VI everything works as I expect it should. I am then able to open it again but now the "blank button" doesn't function and I can't close the window or even open the block diagram to probe anything. I have been trying to figure this out for awhile, any insite would be greatly appreciated!
Thanks
Solved!
Go to Solution.

Its good that you found the bug.
This code may serve as a way for you to compare notes.
Ben
Ben Rayner
I am currently active on.. MainStream Preppers
Rayner's Ridge is under construction

Close Accordion panel by clicking on a button

I'd like to have a button either in the Tab or Content to
make the content panel close. What is a good way of doing it?
Thanks!

If you have constructed the widget the following way
var acc = new Spry.Widget.Accordion('id',
{useFixedPanelHeights:false});
then you should add an onclick handler like
onclick="acc.close()"
The accordion then closes the active panel. The
useFixedPanelHeights option is necessary.

Open and close front panel

Hi,
I wish to have a VI that works as a main menu from which you start new
VI's depending on your choice. When the new VI start I want the main
menu to hide it's front panel temporarily until it the second VI
returns.
Anyone has a solution to this?
/Nimrod
Sent via Deja.com http://www.deja.com/
Before you buy.

[email protected] wrote:
When the new VI start I want the main menu to hide it's front panel temporarily
until it the second VI returns.
If you are using LabVIEW 5.1, you can use the VI server attributes to hide
the VI by moving it off of the desktop. I will send you a sample in private
mail.
The attribute (property) you need to use is Front Panel Window -> Window
Bounds.
Set it to something that is larger than your window size, like 2000, 2000,
2200, 2200.
I hope that this helps,
Bob Young
Bob Young - Test Engineer - Lapsed Certified LabVIEW Developer
DISTek Integration, Inc. - NI Alliance Member
mailto:[email protected]

Spry collabsible panel add button or text link to get panel to close

I have a spry collapsible panel here www.AmericanContractorsExchange.com. I am using the col-panel to hide what wil become the login area. I would like to add both "text" and buttons to various parts of the page to open or close the panel.
Example one. When user clicks on the " Log in or Register" text "top" the panel opens.
There option is to login
Register
or click to close panel... button.
( I wish to know how to program the buttion function to close the panel please)
Example 2: Within the other spry widiget on the page, the spry tabbed panels, is the "content". I would like to have "text" or a "button" that a user could click to have the
"spry collapsible" panel drop down / open so they can login or register.
Thanks Gramps...what is the address will send box of cigars!
S Valencia

Try the following
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">Content</div>
</div>
<div>
<p><a href="#" onclick="CollapsiblePanel1.open();">REGISTER</a></p>
<input name="myButton" type="button" value="Close Panel" onclick="CollapsiblePanel1.close(); return false;">
</div>
<div id="TabbedPanels1" class="TabbedPanels" style="margin-top: 20px;">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent"><p><a href="#" onclick="CollapsiblePanel1.open();">REGISTER</a></p></div>
    <div class="TabbedPanelsContent"><input name="myButton" type="button" value="Close Panel" onclick="CollapsiblePanel1.close(); return false;"></div>
</div>
</div>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
Please wait with the shipment, I am currently living at a transitory address; my impending address will be c/o Heaven
Gramps

Using text links to open accordion panel

How do I use text links (from the page's main menu) to
programatically open a particular panel.
here is the page:
http://debrankin.com/tee/SITEDESIGN/
for example: I want to click on "Resumes and Cover Letters"
in the left hand menu to open the first accordion panel (by the
same name). I have this set this page so that all panels are closed
initially.
i know i'm missing something because this obviously does not
work: i've looked for documentation and this issue is inadequately
addressed!

twinflame wrote:
> i know i'm missing something because this obviously does
not work: i've looked
> for documentation and this issue is inadequately
addressed!
Not really. The problem is that you have attempted to create
a
JavaScript object called accordion1 before the accordion HTML
is even
loaded into the browser. Moreover, the script that
initializes the
accordion is already in your HTML where it should be (after
the
accordion), but it uses Accordion1, not accordion1
(JavaScript is
case-sensitive.
Remove this after your menu.
> <script type="text/javascript">
> var accordion1 = new
Spry.Widget.Accordion("Accordion1");
> </script>
Change the links in the menu to Accordion1.openPanel(0),
etc., and it
should work.
David Powers
Adobe Community Expert, Dreamweaver
http://foundationphp.com

How can I enable the center mouse click to open and close tabs in Firefox and Chrome?

I have a MacBook Pro Model A1261 purchased in 2009. On my other mac at work (and my PC) I can center click to open a link in a new tab while in Chrome or FireFox, and also to close a tab by clicking on it in the tabs at the top. I am using an external USB mouse on my MacBook Pro and when I click the center scroll wheel it brings up the dashboard. I looked in the settings but wasn't able to find a way to change that setting for the center button to open and close tabs in my web browser. Is there a way? Please help!

You can restore the zoom feature by changing the values of the related prefs on the <b>about:config</b> page.
* browser.gesture.pinch.in -> <b>cmd_fullZoomReduce</b>
* browser.gesture.pinch.in.shift -> <b>cmd_fullZoomReset</b>
* browser.gesture.pinch.out -> <b>cmd_fullZoomEnlarge</b>
* browser.gesture.pinch.out.shift -> <b>cmd_fullZoomReset</b>
* browser.gesture.pinch.latched -> <b>false</b>
*http://kb.mozillazine.org/about:config
See also:
*pinchy: https://addons.mozilla.org/firefox/addon/pinchy/

Help tweaking Spry accordion panel code!

Hello all,
I'm currently working on an information portal for a client and am having trouble with creating code to open a specific accordion panel on another html page without messing up the code so that the accordion panels have adjustable heights based on content.
The website has an Interactive Map page, which has some tooltips that have links to the Nurseries page. The Nurseries page has accordion panels with nursery entries ordered by province; anchor links were added to nursery entries that are linked to the Map page. In theory, when a user clicks on a "Click here for information" link on the Map page, the Nurseries page will load and automatically open the exact panel where the entry is housed with the exact entry showing at the top of the browser window. So I tested it out and it works exactly as I want it to, HOWEVER, the adjustable height feature that I added to the accordion panels on the Nurseries page now no longer works (now there are scrollbars on the right if the height exceeds the default height), AND all the panels by default are open instead of closed!
Here is the pertinent code that I am using on the NURSERIES page:
<script src="../SpryAssets/SpryAccordion.js" type="text/javascript"></ script>
<link href="../SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="SpryAssets/SpryURLUtils.js"></ script>
<script type="text/javascript"> var params = Spry.Utils.getLocationParamsAsObject(); </script>
<script type="text/javascript"> var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: params.panel ? params.panel: 0 });
</script>
This is the code I added to one of the tooltips on the MAP page:
<a href="nurseries.html?panel=9#mangatarem" title="Go to native species nursery listing" target="_blank">
What do I need to do in order for this to work? I tried reordering the code to read { defaultPanel: params.panel ? params.panel:
0, useFixedPanelHeights: false } and even tried combining the two { useFixedPanelHeights: params.panel ? true: false } but nothing worked. Any suggestions?
Many thanks in advance for your assistance!!
Joy

Hi Joy,
Without going to a lot of trouble in writing an onload event, the following method is feasable
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" />
<style>
.region {
    color: #090;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 2em;
</style>
<script src="SpryAssets/SpryAccordion.js"></script>
<script src="SpryAssets/SpryURLUtils.js"></script>
<script> var params = Spry.Utils.getLocationParamsAsObject(); </script>
</head>
<body>
<div id="acc" class="Accordion" tabindex="0">
<span class="region">Luzon</span>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1.1</div>
    <div class="AccordionPanelContent">
      <div class="nurseryProfile">
        <table border="0" >
          <tr>
            <th width="122" class="nurseryCategory" scope="row" >Location:</th>
            <td width="422">Morong; Bataan</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Institution:</th>
            <td>Center for Biomolecular Science</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Contact Person:</th>
            <td>Dr. Lourdes J Cruz <br />
              [email protected]</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Species Available:</th>
            <td> </td>
          </tr>
        </table>
      </div>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1.2</div>
    <div class="AccordionPanelContent">Content 1.2</div>
</div>
<span class="region">Visayas</span>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2.1</div>
    <div class="AccordionPanelContent">Content 2.1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2.2</div>
    <div class="AccordionPanelContent">Content 2.2</div>
</div>
<span class="region">Mindanao</span>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Bukidnon Province</div>
    <div class="AccordionPanelContent">
      <div class="nurseryProfile">
        <table border="0" >
          <tr>
            <th width="122" class="nurseryCategory" scope="row" >Location:</th>
            <td width="422">San Vincente; Baungon; Bukidnon</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Institution:</th>
            <td>Kalangan San Vincente Farmer’s Association</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Contact Person:</th>
            <td>Mr. Nonito Antoque <br />
            0926 904 7336</td>
          </tr>
          <tr>
            <th scope="row" class="nurseryCategory">Species Available:</th>
            <td> </td>
          </tr>
        </table>
      </div>
      <hr width="565" align="center"/>
      <div class="nurseryProfile">
        <table border="0" >
            <tr>
              <th width="122" class="nurseryCategory" scope="row" >Location:</th>
              <td width="422">Brgy. Imbayao; Malaybalay City; Bukidnon</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Institution:</th>
              <td>DENR Community-Based Rainforestation Project</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Contact Person:</th>
              <td>Mr. Felix Mirasol (CENRO & PASU)<br />
              [email protected]</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Species Available:</th>
              <td> </td>
            </tr>
        </table>
      </div>
    </div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Compostela Valley Province</div>
    <div class="AccordionPanelContent">
        <div class="nurseryProfile">
        <table border="0" >
            <tr>
              <th width="122" class="nurseryCategory" scope="row" >Location:</th>
              <td width="422">Maragusan; Compostela Valley</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Institution:</th>
              <td>Kasilak Development Foundation</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Contact Person:</th>
              <td>Joemil Montebon<br />[email protected]</td>
            </tr>
            <tr>
              <th scope="row" class="nurseryCategory">Species Available:</th>
              <td> </td>
            </tr>
        </table>
      </div>
    </div>
</div>
</div>
<script>
    var acc = new Spry.Widget.Accordion("acc", { defaultPanel: params.panel ? params.panel: 0 });
</script>
</body>
</html>
Notes:
Apart from the 14 errors created by the table elements and their style rules, the above document is HTML5 validated.
The panels count include the <span>'s so that panel 0 is Luzon and panel 1 is the first accordion panel
Because the <span>'s are part of the accordion, they take on the accordion style rules so that you will have to tweak them.
I hope this helps.
Ben

Programmatically Open and close panel accordion on button click

Hi All,
Im using JDev 11.1.1.4 and adf faces application.
My requirement is to open/close panel accordion on button click programmatically.Kindly have a look at below figured one
Panel accordion Open Button
| ShowDetail1 //Consider first one is open inside close button is there to close this pane..
|
|
|
Close Button
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Show detail2 open button
Show details3 open button
Any idea...
Thanks,

Thanks Mr.frank...
But disclosed property is to make the showdetail to disclose or not.. but requirement is to open panel accordion on button click
By default using panel accordion have arrow icon in left to open in a same way if i open the second one, first will get close automatically...
Actually is there any way to do the default process (open/close) programmatically...

Accordion Panel Widget - open and close speed.

Hello,
Is there any way to change the speed that an Accordion Panel Widget opens and closes?
I would like it to be slower than it is now.
For my project it would be more relaxed and graceful.
Thanks,
Chris.

HI Chris
With Accordion we cannot setup the speed as of now , but you can try out composition widget where we can define transition, auto play speed.
Thanks,
Sanjit

Globally open and close all accordion panels

Is there a way to globally open and close all accordion
panels? For example, it would be nice to have an "Expand all" and
"Collapse all" link at the top of the page, before the accordion,
that has this functionality.

Hi FM_n_DC,
Accordions can only ever have a single panel open. If you
want individual control over which panels are open you probably
want to use a CollapsiblePanelGroup. This sample shows how to open
all and close all of the panels of the CollapsiblePanelGroup:
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
--== Kin ==--

Accordion Panel Opens, then Closes

First, here's the URL I'm working from...
http://www.jegs.com/test/randy/newlook/csIndex.html
Click on the Rebates button across the top. The default
panels are set to have all closed, but click on the first one. It
opens, then closes. The others work fine.
Any ideas?
Randy

The issue was with all browsers. Not sure what the problem
was, but the page has changed since this post. I've got it working
to what was requested of me.

Since installing LTR 5.4, which I've now upgraded to 5.6, I've encountered repeated slowness and malfunctions in operations, especially when using the Compare View function and the Tab key to open and close the right and left side panels. Such problems n

Since installing LTR 5.4, which I've now upgraded to 5.6, I've encountered repeated slowness and malfunctions in operations, especially when using the Compare View function and the Tab key to open and close the right and left side panels. Such problems never arose during two years of using LTR-4 and nothing else has changed on my computer. I have a pretty simple system with only a few plug-ins, which are usually not in operation. I have 12GB of RAM in my Windows 7 PC. I could illustrate these problems with screen shots if you would tell me how to submit screen shots. Otherwise I will try to describe the problems in words.
The problem is clearly cumulative, growing worse as usage time passes. Compare View feature gradually slows down and eventually seems to choke as my work session proceeds. If I Exit LTR and re-enter and start all over, things will work normally for maybe 30 minutes, but then the Compare View feature begins to become very slow to respond. In a recent example with my screen full of thumbnails in Library mode I highlighted two images to compare. LTR started to open the Compare View screen by first having the top row of thumbnails disappear to be replaced by the "SELECT" and "CANDIDATE" words in their spaces (but no images), but Compare View never succeeded in gaining control of the screen. After some seconds the top row of thumbnails reasserted its position and the Compare View windows disappeared. But LTR kept trying to bring them back. Again the top row of thumbnails would go away, Select and candidate would reappear, try again, and give up. This went on for at least 2-3 minutes before I tried to choose File and Exit, but even that did not initially want to respond. It doesn't like to accept other commands when it's trying to open Compare View. Finally it allowed me to exit.
To experiment I created a new catalog of 1100 images. After 30-40 minutes, the Compare View function began to operate very slowly. With left and right side panels visible and two thumbnails highlighted, hitting Compare View can take half a minute before the two mid-size images open in their respective SELECT and CANDIDATE windows. When the side panels are open and two images are in the Select/Candidate spaces, hitting the Tab button to close the side panels produces a very delayed response--25-30 seconds to close them, a few more seconds to enlarge the two images to full size. To reverse the process (i.e., to recall the two side panels), hitting Tab would make the two sides of the screen go black for up to a minute, with no words visible. Eventually the info fields in the panels would open up.
I also created a new user account and imported a folder of 160 images. After half an hour Compare View began mis-placing data. (I have a screen shot to show this.) CANDIDATE appears on the left side of SELECT, whereas it should be on the right. The accompanying camera exposure data appears almost entirely to the left of the mid-screen dividing line. Although the Candidate and Select headings were transposed, the image exposure data was not, but the data for the image on the right was almost entirely to the left of the line dividing the screen in two.
Gurus in The Lightroom Forum have examined Task Manager data showing Processes running and Performance indicators and they see nothing wrong. I could also send screen shots of this data.
At this point, the only way I can process my images is to work 30-40 minutes and then shut down everything, exit, and re-start LTR. This is not normal. I hope you can find the cause, and then the solution. If you would like to see my screen shots, tell me how to submit them.
Ollie
[email protected]

Since installing LTR 5.4, which I've now upgraded to 5.6, I've encountered repeated slowness and malfunctions in operations, especially when using the Compare View function and the Tab key to open and close the right and left side panels. Such problems never arose during two years of using LTR-4 and nothing else has changed on my computer. I have a pretty simple system with only a few plug-ins, which are usually not in operation. I have 12GB of RAM in my Windows 7 PC. I could illustrate these problems with screen shots if you would tell me how to submit screen shots. Otherwise I will try to describe the problems in words.
The problem is clearly cumulative, growing worse as usage time passes. Compare View feature gradually slows down and eventually seems to choke as my work session proceeds. If I Exit LTR and re-enter and start all over, things will work normally for maybe 30 minutes, but then the Compare View feature begins to become very slow to respond. In a recent example with my screen full of thumbnails in Library mode I highlighted two images to compare. LTR started to open the Compare View screen by first having the top row of thumbnails disappear to be replaced by the "SELECT" and "CANDIDATE" words in their spaces (but no images), but Compare View never succeeded in gaining control of the screen. After some seconds the top row of thumbnails reasserted its position and the Compare View windows disappeared. But LTR kept trying to bring them back. Again the top row of thumbnails would go away, Select and candidate would reappear, try again, and give up. This went on for at least 2-3 minutes before I tried to choose File and Exit, but even that did not initially want to respond. It doesn't like to accept other commands when it's trying to open Compare View. Finally it allowed me to exit.
To experiment I created a new catalog of 1100 images. After 30-40 minutes, the Compare View function began to operate very slowly. With left and right side panels visible and two thumbnails highlighted, hitting Compare View can take half a minute before the two mid-size images open in their respective SELECT and CANDIDATE windows. When the side panels are open and two images are in the Select/Candidate spaces, hitting the Tab button to close the side panels produces a very delayed response--25-30 seconds to close them, a few more seconds to enlarge the two images to full size. To reverse the process (i.e., to recall the two side panels), hitting Tab would make the two sides of the screen go black for up to a minute, with no words visible. Eventually the info fields in the panels would open up.
I also created a new user account and imported a folder of 160 images. After half an hour Compare View began mis-placing data. (I have a screen shot to show this.) CANDIDATE appears on the left side of SELECT, whereas it should be on the right. The accompanying camera exposure data appears almost entirely to the left of the mid-screen dividing line. Although the Candidate and Select headings were transposed, the image exposure data was not, but the data for the image on the right was almost entirely to the left of the line dividing the screen in two.
Gurus in The Lightroom Forum have examined Task Manager data showing Processes running and Performance indicators and they see nothing wrong. I could also send screen shots of this data.
At this point, the only way I can process my images is to work 30-40 minutes and then shut down everything, exit, and re-start LTR. This is not normal. I hope you can find the cause, and then the solution. If you would like to see my screen shots, tell me how to submit them.
Ollie
[email protected]

Accordion-Toggle Open and Close

I apologize if this has been covered before, but I checked
and couldn't find a solution. I'd like the accordion to toggle
between open and close the same panel. Right now, when I click on
it, it opens, but it doesn't close when I click on the same panel
again. Is there any way that can be achieved?

Don't you just want the :
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/collapsible_panel_sample. htm
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/collapsible_panel_sample. htm

Prevent lower text from moving when accordion panels open

I tried out the Accordion Panel from Project Seven which is
really nice and works well. My only issue right now is that I would
like to prevent the rest of the text outside and below this widget
within the same column from moving. When any panel opens it causes
the contents of the entire column to shift down thus causing the
page to shift down as well.
I have tried using a new div for the content below the panels
and also a new table below but can't seem to figure out how to keep
the content from shifting. Curently I have a table cell nested and
have tried with CSS to keep it from moving but that is not working
either.
Thanks in advance for any help with this.
Here is the code for the column in question:

no takers on this one? Does anyone know how I could fix this
with divs? Is it possible to put this accordion into a separate div
and create another below it that would not move? Like on the new
apple site...They have some really awesome accordion style navs on
the sides that do not throw the rest of the page off when they open
or close.
Thanks.

Buttons to open or close accordion panels

Similar Messages

Maybe you are looking for