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

Similar Messages

Having trouble trying to link to an accordion panel on the same page

Hello all,
I've been following instructions on
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#EnablingKey boardNavigation
to try to link to/open a specific panel in an accordion panel from a menu on the same page, but it's not working. Could somebody tell me what I'm doing wrong? My page-in-progress is:
http://fleap.com/YGRpage2011.html#
The menu on the right, under the word, "Details", is the one I'm trying to link to the accordion panel, and the panel itself is lower down the page.
thanks very much for any help you can give me!
Anna

1. Remove the constructor in the HEAD section of your document
var acc1 = new Spry.Widget.Accordion("SpryAccordion1", { useFixedPanelHeights: false });
2. Change the HTML markup to the following
<ul>
<li><a href="#" onclick="Accordion1.openPanel(0); return false;"> how <span class="title">You've Got Rhythm</span> works</a></li>
<li><a href="#" onclick="Accordion1.openPanel(1); return false;">sample pages</a></li>
<li><a href="#" onclick="Accordion1.openPanel(2); return false;">reviews</a></li>
<li><a href="#" onclick="Accordion1.openPanel(3); return false;">syllabus</a></li>
<li>copying license</li>
<li>about the authors</li>
<li>tips</li>
<li>cd tracks</li>
</ul>
Gramps

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.

How do I Hide open accordion panels, tooltips, etc. in Design view in Muse

I am adding tooltips and accordion panels in Muse. The problem is that, when I am editting the site in Design view, I cannot get the tooltips and panels to close... and so any other objects, text, etc is hidden by the open tooltip / accordion panel... I worked around this somewhat by creating another element in the accordion panel that contains no text, and so shrinks the whole accordion when that element is active, but this is cumberson, and I can find no comparable work-around for tooltips...

AppleScripts can be saved as run-only, which will keep a casual user from seeing the code, but there isn't a way to keep plain text from being seen. You should never place sensitive information in plain text in your script/application, or even use them with global variables, since those are also saved with the script.
The security shell utility can be used to get a password from the system keychain, for example:
getKeychainPass("Apple") -- example
on getKeychainPass(itemName)
return text 2 thru -2 of (do shell script "security 2>&1 >/dev/null find-generic-password -gl " & quoted form of itemName & " | awk '{print $2}'")
end getKeychainPass

Text link and open browser window

Hello
I have successfully done this clicking on an image using
behaviours 'open browser window' to open a larger version of the
image and I would like to do the same with a text link eg 'click
here for Terms and Conditions' and have that web page open in the
same way setting the width, height etc. I can't seem to do it. Any
help gratefully accepted!
Thank you very much in advance.

James Shook wrote:
> ... Search this newsgroup's archives for the way to do
this so it will
> work well in browsers with JavaScript turned off.
An easy way to do follow James sage advice, once you've added
the Open
Browser Window behavior to your's link, is to run the free DW
Extension
divaFreeTools on your page. It will update the DW
OpenBrowserWindow
Behavior to work properly when javascript is off and help
Search Engines
find your linked page/image.
http://divahtml.com/products/divaFreeTools/free_dreamweaver_tools.php
E. Michael Brandt
www.divahtml.com
www.divahtml.com/products/scripts_dreamweaver_extensions.php
Standards-compliant scripts and Dreamweaver Extensions
www.valleywebdesigns.com/vwd_Vdw.asp
JustSo PictureWindow
JustSo PhotoAlbum, et alia

Using a text link to open a new browser window to a specific size

i can figure out how to make a link open up a new window
(_parent, _top, etc.), but how do i make the window a specific
size?
thanks,

Hi joeq ,
We don't need to change the html page title. I tested the
same code ('undefned') in html/javascript, but not with flash.
Use the same script in html/javascript and test it.
If it works fine, then create a javascript function in your
parent html.
Then call the function from flash, it will be fine.
I tested the same code with IE, Netscape, Firefox(linux),
also mac-safari.
Regards,
Sankarapandian T.
[email protected]
Chennai, India.

Open Accordion Panel when on Active Page

I am trying program a panel tab to open based on which page
is active ... For instance I have five panels and each panel has
from one to 5 links. I would like to have the panel tab to stay
open if I am on that links current page ... Does anyone have the
time to explain how to do this?

Both the accordions should show the same colours and operate the same way. Yet on one page, the colours don't change and the accordion seems to be in a box (there is an outline all around).
It shows up the same in either firefox or IE. I didn't know I was using an old version of Spry, so will try upgrading and see what happens. Thanks for pointing that out.

Opened accordion panels in load

I've got 5 panels with links inside the panel content; on
initially loading the page, all panels appear opened for a second
ot two, then collapse, leaving panel 0 open.
Revisiting the page, they appear collapsed withe panel 0
open.
How can I make sure they are collapsed when the page
initially loads?
Frustrated, to say the least.

Its probably the coding of your page that is messed up.
Place the <script> element containing your constructor
right under your accordion. and se the defaultpanel to -1

Opening Accordion Panels w/ MouseOver

I would like to customize an accordion widget so the panel contents open when I move my mouse over the panel tab. The default setting opens only with mouse click. How can I change this? Is it possible to add Dreamweaver behaviors to Spry widgets, or will I need to change the code directly? Thanks.

check this sample here:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#Programatic OpenAndClose
this has been specifically programmed to open and close using onclick, but i guess it would work the same for onmouseover

How do I center the text in full width accordion panel?

Hello!
Is it possible to center the text to follow the full width accordion widget?
When you expand to fill the screen, the text are fixed and doesn't follow the center headline...
I created a page so you see what I'm talking about: http://fullwidthissue.businesscatalyst.com/index.html
Please respond if you know what to do or if it's impossible..
Thanx

This believe this can be fixed within the <head> of the document. I had the same problem and it took me a bit to figure this solution.
Step 1
Find the <div> ID that muse gives to the content portion of the accordion element. you can find this by using a web browser that lets you inspect the code.
Step 2 once you have that code replace u6174. with your specific <div> then past this into your <Head> of the muse document. Almost forgot.....Get a general idea of the minimum size around your content this example it was a width of 750px. and change the width accordingly on this code.
<style>
#u6174{
width: 750px;
padding-left: 0px;
padding-right: 0px;
margin-right: auto;
margin-left: auto;
border-right-width: 0px;
border-left-width: 0px; "}
</style>
you can see a sample of this here:
Alain Hunkins
At the bottom is this solution working.
Let me know if that helps.

Hide Accordion Panels whilst loading

Hi All,
The default behaviour of the Accordion is to show all panels
as open
until the script kicks in and hides them (if defaultPanel:
-1) or just
shows one, which ever is set as default.
In my test:
http://www.ac-et.com/bargains/request.asp
I have enabled the
page to use a link to open specific panels (thanks to David
Powers'
website) but I have also set display: none on the
panelcontent via css,
so the panels really don't display when loading.
My concern is accessibility. With JS turned off, the panels
won't show,
as they are hidden via css. But without this, all 4 panels
show when the
page is loading, something I am trying to avoid.
Is there another technique I can use to hide the content, but
still be
shown to those with JS turned off?
Dooza
Posting Guidelines
http://www.adobe.com/support/forums/guidelines.html
How To Ask Smart Questions
http://www.catb.org/esr/faqs/smart-questions.html

.V1 wrote:
> A small "hack" that I always use is:
>
> document.getElementsByTagName('html')[0].className =
'js';
>
> in one of my scripts that are loaded in the <head>
section. This will add the
> class js to the <html> tag. So you can target
elements depending on javascript
> enabled.
>
> for example javascript enabled would be:
> .js .AccordionPanelContent {display:none;}
Perfect, just what I needed, very clever!
> Anyways why don't you just place your constructor right
under your accordion
> so it will get rendered when the accordion has been
parsed by the browser.
I am using the unobtrusive method, and when I did as you
suggested it
made no difference. Your "hack" works just fine.
Now, back to getting my effect shrink effect to work :)
Dooza
Posting Guidelines
http://www.adobe.com/support/forums/guidelines.html
How To Ask Smart Questions
http://www.catb.org/esr/faqs/smart-questions.html

Anchor links to accordion panels not working properly across browsers

Hi everyone,
I need some help to figure out why my anchor links to specific accordion panels on another page are not working properly across browsers.
I have a Map page which has tooltips on mouseover on the site markers. 15 of the tooltips have "Click here for information" anchor links (although only 14 are currently linked) which, in theory, would take you to the Nurseries page where the specified accordion panel would be opened with the nursery entry appearing at the top of the new browser window.
Here are the links to the Map page and Nurseries page, respectively:
www.alegriadesignstudio.com/RFRI/map_v6.html
www.alegriadesignstudio.com/RFRI/nurseries_v6.html
I've tested the anchor links on IE, Firefox, Google Chrome, and Safari, and have received varying results. In most cases, the anchor links worked perfectly on two of the browsers, while on the other browsers, the correct accordion panel is opened but the nursery entry does not appear at the top of the new browser window. Anchor links using Safari and Google Chrome fared better (10 out of 14 links worked properly, and 8/14, respectively), whereas when using Firefox and IE, only 3 anchor links worked properly. The target audience for this website will be using IE and Firefox, so I would appreciate any help to figure out how to tweak the code so that the most, if not all, anchor links work properly on these two browsers in particular.
Here's an anchor link which worked perfectly in IE, GC, and Safari, but in FF, the entry did not appear at the top of the new browser window.
www.alegriadesignstudio.com/RFRI/nurseries_v6.html?luzon=9#mangatarem
http://www.alegriadesignstudio.com/RFRI/nurseries_v6.html?luzon=9#mangatarem [To access the anchor link on the Map page, mouseover the third green dot from the top of the map (Tooltip--Location: Mangatarem) and then click on "Click here for information."]
Here's a sample anchor link in which the entry did not appear at the top of the new browser window in any of the 4 browsers:
www.alegriadesignstudio.com/RFRI/nurseries_v6.html?mindanao=4#magpetAmabel
http://http://www.alegriadesignstudio.com/RFRI/nurseries_v6.html?mindanao=4#magpetAmabel [To access the anchor link on the Map page, go to "Mindanao" at the bottom of the map and mouseover the fourth green dot below the word "Mindanao" (Tooltip--LOCATION: Brgys. Amabel, Bongolanon, Imamaling, & Manobisa; Magpet; North Cotabato) and then click on "Click here for information."]
Here's a sample anchor link in which the anchor link worked properly in GC and Safari, but the entry didn't appear at the top of the browser window in IE and FF:
www.alegriadesignstudio.com/RFRI/nurseries_v6.html?visayas=1#bilar
http://http://www.alegriadesignstudio.com/RFRI/nurseries_v6.html?visayas=1#bilar [To access the anchor link on the Map page, go to the small island north and a bit west of "Mindanao" which is called "Bohol" and mouseover the fourth green dot below the word "Mindanao" (Tooltip--LOCATION: Bilar; Bohol) and then click on the first "Click here for information."]
Many thanks in advance for your assistance!
Joy

Hi everyone,
I'm still trying to figure out how to resolve the problem of anchor links to accordion panels not working properly across browsers (see original post for details). I would greatly appreciate any suggestions on how to resolve the problem.
Many thanks in advance.
Joy

Spry Accordion panels and Google search

Hello! I have about 30 pages with at least 15 spry accordion
panels on each. I've just implemented a local customized google
search and it looks like Google is able to pull pretty accurate
search on both the panels and panels content.
Once presented with the search results, can a user get to an
OPEN accordion panel, that relates to his search? I hope I've
explained it clearly, THanks!

highedwebby wrote:
> Hello! I have about 30 pages with at least 15 spry
accordion panels on each.
> I've just implemented a local customized google search
and it looks like Google
> is able to pull pretty accurate search on both the
panels and panels content.
Yes, this happens because all of the content is on the page.
> Once presented with the search results, can a user get
to an OPEN accordion
> panel, that relates to his search? I hope I've explained
it clearly, THanks!
I've seen some scripts that highlight Google search terms, so
I suppose that getting the search terms on the destination page is
possible, but making that leap to the proper panel to open may be a
little more difficult.
First you have to figure out which panel the words are
in,then you have to figure out what if the user is searching for
three terms and each of those terms is in a different panel, or if
only one term, and that term is in multiple panels? How would you
expect that work out?
You can highlight the words using code such as that discussed
on this page:
http://www.kryogenix.org/code/browser/searchhi/
I'd guess that someone could reverse that code that finds the
text and then take that find and then walk up the DOM tree to see
if you are within an accordion panel and then show that panel as
the default panel on the page.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Create Tabbed and Accordion Panels | Adobe Muse Feature Tour | Adobe TV

Organize lengthy information in more visually appealing, “bite-sized” chunks by using fully customizable tabbed or accordion panels.
http://adobe.ly/I5cQoV

After working with the accordion panels I've found it's about 1,000 times easier to develop your content outside the panels: selections inside of the panels is wonky at best.

Mobile menu -- Accordion Panel or Composition -- which is recommended?

Hi,
I have been experimenting with mobile menus and have come up with good solutions using two different methods: 1) Accordion Panel widget; 2) Composition blank widget. Both use a trigger and a content container with a vertical menu. Both work well.
Question for the experts here: Is either of the two menu techniques recommended, and why? They work and feel a little differently, but I am more concerned with their compatibility on different mobile devices and browsers.
Thanks for any help with this.
John

This may depend on the site design as what contents and page objects are used , both should work as expected.Both widgets are compatible across all browsers and devices.
So you can go with both options, my suggestion would be create 2 pages with separate menu and then check and finalize.
Thanks,
Sanjit

Using text links to open accordion panel

Similar Messages

Maybe you are looking for