Spry collapsible panel to open from link on same page

Hi guys.
I have a page with about 17 collapsible panels. What I would like to do is in my sidebar have a quicklinks which will 1) anchor down to the relevant panel and 2) open that closed panel.
My first problem I know can easily be fixed with anchor tags which I have done. I will also assume that I can do something like <a href="#anchorname" onclick="" > to solve my 2nd problem, but can someone maybe advise to what the command is to actually open the panel. I have attached a sample below of one of my panels:
var banking10 = new Spry.Widget.CollapsiblePanel("banking10", {contentIsOpen:false});
I have VERY VERY VERY limited experience with Javascript (else I guess this would have been a breeze )
Thanks in advance!

The following is a document called untitled.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet">
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
</head>
<body>
<div>
  <ul id="MenuBar1" class="MenuBarHorizontal">
    <li><a href="untitled.html?col1=1">Open 1st CP</a></li>
    <li><a href="untitled.html?col2=1">Open 2nd CP</a></li>
  </ul>
</div>
<div id="CollapsiblePanel1" class="CollapsiblePanel" style="clear:both;">
  <div class="CollapsiblePanelTab" tabindex="0">Tab</div>
  <div class="CollapsiblePanelContent">Content CP1</div>
</div>
<div id="CollapsiblePanel2" class="CollapsiblePanel" style="clear:both;">
  <div class="CollapsiblePanelTab" tabindex="0">Tab</div>
  <div class="CollapsiblePanelContent">Content CP2</div>
</div>
<script src="SpryAssets/SpryMenuBar.js"></script>
<script src="SpryAssets/SpryCollapsiblePanel.js"></script>
<script src="SpryAssets/SpryURLUtils.js"></script>
<script>
var params = Spry.Utils.getLocationParamsAsObject();
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen: params.col1 ? true : false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen: params.col2 ? true : false});
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
Copy and paste the above into your own document to test the code, making sure that all the linked files are in their correct location. The markup contains a SpryMenuBar and two SpryCollapsiblePanel's
Gramps

Similar Messages

  • How to force page to scroll when collapsible panel is opened by link

    Hi,
    I have seen similiar questions asked but not answered, so maybe there isn't away to do this.
    I have numerous collapsible panels going all the way down the page, actually I just formed a Collapsible Panel Group. They are opened by a list of links at the top of the page.
    This is an example of a link...
    <li><a href="#CollapsiblePanel14" onclick="cpg.openPanel(13);">AKC CGC & TDI Testing</a></li>
    And this is the javascript at the bottom of the page...
    var cpg = new Spry.Widget.CollapsiblePanelGroup("CollapsiblePanelGroup1", { contentIsOpen: false, duration: 800 });
    When a link to one of the lower panels is clicked, I would like the page to scroll down so when the panel opens all of the content is within view.
    Is there any way to do this?
    Thanks
    Dennis

    On line 431 of your JS change
    this.content.style.height = this.toHeight + "px";
    to
    this.content.style.height = "auto";

  • Spry collapsible panel stays open in Internet Explorer.

    I'm trying to use the spry collapsible panel to hide and show inormation, and it will not stay closed.  I've used the default closed option in the properties panel, and made sure the eye in design view is closed.  Please give some suggestions for correcting this problem.

    The out-of-the-box SpryCollapiblePanel works like a charm.
    This means that you have altered  the HTML, CSS and/or the JS.
    Because we are not privy to what you have done, it is not possible to help you find a solution.
    I recommend that you upload the site and supply a link to that site.

  • Spry collapsible panel to open horizontally

    Greetings,
    I am using CS5.
    Is there a way to make the sprycollapsiblepanel open horizontally (left to right...right to left) not the default, vertically (up and down)?
    Much Thanks!

    Hi Gramps,
    Much thanks! I was hoping a horizontal feature would have been added by now (the post looks to be 2 years old), but this looks like the slide effect is what I want.
    Thanks again!

  • Question about Spry Collapsible Panel

    Hey guys my question is that I have a PSD sliced and imported into Dreamweaver and I was wondering if it was possible to have a Spry Collapsible Panel drop down from a button I designed in Photoshop and brought into dreamweaver? Basically I want a content area to drop down when that button is clicked and I figured a Spry Collapsible Panel might be able to accomplish that. I hope I'm explaining this clearly enough, I'm not very experienced with Dreamweaver. Thanks!

    Definitely possible.
    You should first import the image into DW.
    Insert > Spry > Spry Collapsible Panel
    It'll insert a demo panel.
    You'll then have to move your image <img src..> into the default first div under spry collapsible as follows:
    <div id="CollapsiblePanel1" class="CollapsiblePanel">
      <div class="CollapsiblePanelTab" tabindex="0"><img src="location-to-your-image.jpg" width="100" height="50" /></div>
      <div class="CollapsiblePanelContent">Content</div>
    </div>
    You'll basically be removing 'TAB' from here to replace it with your img src tag.
    Your HTML should look like this:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Collapsible Test</title>
    <script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="CollapsiblePanel1" class="CollapsiblePanel">
      <div class="CollapsiblePanelTab" tabindex="0"><img src="location-to-your-image.jpg" width="100" height="50" /></div>
      <div class="CollapsiblePanelContent">Content</div>
    </div>
    <script type="text/javascript">
    <!--
    var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
    //-->
    </script>
    </body>
    </html>
    Do note that you'll have to copy the supporting spry files to your server for this to work. By default, DW will place them into your project folder once you insert the spry collapsible panel.

  • Target Named Anchor in a Spry Collapsible Panel from a different page

    Let me start by saying I have combed this forum (and others) looking for a resolution to this.  I am familiar with David Powers solution on Foundationphp.com and am using that code in project to open the collapsible panel from a separate page and it works beautifullly.  The problem I have is that I want the browser to move down to a specific named anchor inside that opened collapsible panel when clicked from a different page.
    Snippets of my current code here.
    Below is the code that I have on an image that when clicked goes to the correct page and opens Panel1.  Works Perfectly!
    <a href="bamboo-species.php?col1=open#CollapsiblePanel1"><img src="images/Content/Photos/HomeScroll/blackTmbor.jpg" width="227" height="175" /></a>
    Below is the link to the .js file and the script in the head of the target page
    <script type="text/javascript" src="SpryAssets/SpryURLUtils.js"></script>
    <script type="text/javascript">
    // Grabs the values of the URL parameters for the current URL.
    var params = Spry.Utils.getLocationParamsAsObject();
    </script>
    Below is the code that I have on the target page for Panel1
    <script type="text/javascript">
    var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:params.col1 ? true : false},{duration: 1000});
    </script>
    If I have a named anchor say <a name="species1" id="species1"></a> down in the page, how do I target that named anchor from my link on the separate page.  I have tried adding the #species1 to the end of the link on the link page (see below) but with no luck. I believe those were the instructions on foundationphp.com site.
    <a href="bamboo-species.php?col1=open#CollapsiblePanel1#species1"><img  src="images/Content/Photos/HomeScroll/blackTmbor.jpg" width="227"  height="175" /></a>
    I hope (and suspect) that this is an easy fix, I just do not know what it is.  Any help or direction where to look is greatly appreciated.

    I once had the same issue can created a small function that allows me to "jump" to a element.
    function scrollTo( element ){
         var stylize = function( element){ return !+"\v1" ? element.currentStyle : document.defaultView.getComputedStyle( element , null ) },
              getPosition = function( element ){
                   // based on the SpryEffect's module:
                   var computedStyle, tryComputedStyle,
                        position = { x: 0, y: 0 };
                        if ( element.style.left  && /px/i.test(element.style.left) ){
                             position.x = parseInt(element.style.left, 10); // without padding
                        } else {
                             computedStyle = stylize( element );
                             var tryComputedStyle = computedStyle && computedStyle.left && /px/i.test( computedStyle.left );
                             if (tryComputedStyle)
                                  position.x = parseInt( computedStyle.left, 10 ); // without padding, includes css
                             if(!tryComputedStyle || position.x == 0) // otherwise we might run into problems on safari and opera (mac only)
                                  position.x = element.offsetLeft;   // includes padding
                        if ( element.style.top && /px/i.test(element.style.top) )
                             position.y = parseInt( element.style.top, 10); // without padding
                        else
                             if ( !computedStyle )
                                  computedStyle = stylize( element );
                        var tryComputedStyle = computedStyle && computedStyle.top && /px/i.test( computedStyle.top );
                             if ( tryComputedStyle )
                                  position.y = parseInt( computedStyle.top, 10 ); // without padding, includes css
                             if( !tryComputedStyle || position.y == 0 ) // otherwise we might run into problems on safari and opera (mac only)
                                  position.y = element.offsetTop;   // includes padding
                   return position;
              scroll( 0, getPosition( element ).y );
    So now we have a scrollTo function that accepts a pure HTML element as argument, all what is left to do is figure out if we have a hash, and if the anchor exits on the page.
    ( hopes this works, i wrote it without testing, but you get the general idea ):
    if( window.location.hash ){
         var hash = window.location.hash.substr(1), // remove the # from the hash
         element;
         // as anchors can also be used with id attributes, check that first,
         element = document.getElementById( hash );
         // maby we used name="" attribute
         if( !element && ( element = document.getElementsByName( hash )) ){
              element = element[0];
         // if we have a match:
         if( element ){
              // give the collapsible panel some time to init and update the DOM;
              setTimeout(function(){ scrollTo( element ) },0);
    \o/

  • Link to tabs in spry collapsible panel work in IE-8; not Firefox or Safari

    I have little experience with Spry. I've asked my question on the user forum in Dreamweaver several times with no response. I am hoping that someone somewhere in the Adobe community can help me resolve this issue.
    I created links from the top of a page to the tabs of a spry collapsible panel underneath.
    In IE-8, on one page, with a small collapsiable panel, clicking the link creates a rollover effect on the appropriate panel. This effect works wonderfully for my purposes.On another page, with a long collapsible panel, clicking the link jumps the user to the panel AND creates a rollover effect. Perfect.
    In Firefox and Safari, clicking the link does nothing. If I right-click the link in Firefox, I create a duplicate of the page.
    I am using Windows XP and Dreamweaver CS4
    http://www.judydiamondstone.net/Writing.html
    click any of the links in the first section of the page
    Thanks.

    Arnout, Thank you so much for the guidance!
    My code now looks like this:
    (Click the first tab
    below to open; click to close.)
    but it still doesn't work
    (I still like the error effect in IE!)
    Do I need to add to the CSS or JS script that comes with the spry widget?
    I am accessing all the tutorials I can find, including a very clear
    explanation of event handlers in a Safari online search but I'm obviously
    missing one or more basic concepts.
    Page with new code on the
    elements:
    http://www.judydiamondstone.net/Writing.html

  • Spry collapsible panel - panel (link) border issue

    Hi folks. I'm new to spry and I'm inserting a spry collapsible panel into a web page in Dreamweaver CS4. It all works fine but i have this very ugly border around the panel tab (the link that you click to open the panel). In frefox its a dotted line and in safari its a blue border. I havent had change to check this in other browsers/platforms. (I'm using a mac) I've read that its an accessabilty thing? which can be overcome in a different way. I have to get rid of this border as it completely spoils the design of the site..
    Anyone know how to remove this?
    Thanks in advance :-)

    Hi, I asked that same question a minute ago, then I saw your solution you wrote to someone else previously.
    Works for me too!
    Thanks for solving it!
    Here is another question if you can help...
    I currently have  ">>read more" at the end of the text in my top content tab panel, so the user knows to click and read more in a lower panel.
    I want that ">>read more" text to disappear when it is clicked and lower content section is open.
    And then a "read less" to appear so user knows to click the top tab content to close the bottom panel.
    Can this be done using this Spry Collapsible technique?
    Thanks!

  • Spry collapsible panel open by default

    Hi there,
    I've done a couple of sites where the left nav bar is a
    series of
    collapsible panels, each one housing links to products within
    a specific
    line. Would it be possible to insert code somewhere to get
    one of the panels
    open by default when you open a certain page, ie if you open
    the 'suncare'
    page the 'suncare' panel is open on load. I read something
    about this on the
    Adobe documentation but when I tried it it did't work.
    It needs to be code somewhere on the page that interacts with
    the spry
    panel, I can't put it on the panel itself as I'm using a SSI
    to insert the
    nav bar into dozens of pages.
    Many thanks...

    Check out the examples on this page: http://www.spry-it.com/examples/spry-widget-cookie-history/#collapsiblepanel

  • DW CS6 - Spry collapsible panels - How to have panel close when you click away from it?

    I know typically onmouseout is used to close other items, but I could not figure it out with the spry collapsible panel. I have the panel opening onclick and closing onclick, but I would really like for it to close when you click anything else on the page outside of the panel.
    Thank you!

    Sorry, I did not mean other collapsing panels close when you click away from it. I simply meant in general for the closing after clicking away function, you can use onmouseout. I was working on something with collapsing panels and I wanted it to show the information when you clicked on it, but when you click on another panel, they both remain open. I really want both to close. I believe accordion does this, but not quite what I am looking for either.
    Here is a better example of what I would prefer: Houston Public Library
    If you visit their page and click "Find it" a box pops down with information and then when you click anywhere else on the screen, it closes that box. When you click "Research," it closes the "Find It" box and opens the "Research" box. There is likely a much better way to do this, but I am pretty new to this.
    Any assistance is very much appreciated.
    Thank you!

  • Spry Collapsible Panels - Way to set them open only once per visit?

    I'm wondering if there is a way to set a Spry Collapsible
    Panel to be automatically open on the initial loading of the site,
    but as people navigate around the site and back and forth from the
    home page, to be able to have it closed on subsequent visits to the
    home page.
    Right now I have a collapsible panel set to OPEN by default
    when someone first hits the home page, but if they navigate around
    the site and then click to the home page again, they get the panel
    open again. Naturally, that will end up annoying people.
    Any suggestions?
    Thanks in advance!
    Sara

    Flash local shared object can help with this. Here is some info:
    http://www.bestflashanimationsite.com/tutorials/4/
    http://www.permadi.com/tutorial/flashSharedObject/index.html
    http://www.kirupa.com/developer/mx/sharedobjects.htm
    Best wishes,
    Adninjastrator

  • Spry Collapsible panel - open and closed default question...

    I am using a Spry Collapsible panel in a vertical nav menu (DW CS4) and it's in a template for my site. I want it to be closed as default on the Home page, but when a visitor clicks to open it and selects their option, I would like it to remain open on the selected page - Is there a way to do this?
    Thank you all!
    Aza

    Check out the examples on this page: http://www.spry-it.com/examples/spry-widget-cookie-history/#collapsiblepanel

  • Make a spry collapsible panel open on hover??

    Hi All,
    I'm trying to play with the Spry Collapsible Panel and would
    like to have it open on hover but not on the on click, I've
    attached the standard js code Dreamweaver produces, and would be
    very grateful if you could highlight what needs to be
    changed,---

    http://labs.adobe.com/technologies/spry/articles/tabbed_panel/index.html
    See the section titled Open panels programmatically
    <li class="TabbedPanelsTab" tabindex="0"
    onmouseover="TabbedPanels1.showPanel(0)">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0"
    onmouseover="TabbedPanels1.showPanel(1)">Tab 2</li>
    Ken Ford
    Adobe Community Expert - Dreamweaver
    Fordwebs, LLC
    http://www.fordwebs.com
    "miachu" <[email protected]> wrote in
    message news:fvihb0$miq$[email protected]..
    > hi there,
    >
    > did you ever find a solution to this dreamweaver
    collapsible panel problem? i
    > am having the same problem...i need it to open on hover
    instead of click. it
    > makes so much more sense for them to have it on
    hover/roll over!
    >
    > help would be much appreciated!
    > thanks.
    >

  • How to make Spry Collapsible Panels open one at a time?

    Hello,
    I am using CS5 and want to use the spry collapsible panels. What I notice (and I think this wasn't the case in cs3) is that all panels can be open at the same time. I don't want that happen. I only want one panel to be open at a time. If someone clicks on a panel that is closed, I want the current panel to close and the one they clicked on to open. I don't want multiple panels to be opne at once. How can I do this? I am not a web developer by any means, so please be easy on me with code. I think in CS3 it used to work this way. Any help would be appreciated! Thank you in advance!

    GRAMPS!! That's it!! It was the accordian panel I had used in the past!!!! Oh, thank you, I was driving myself crazy as to why it wasn't working the way I had remembered!!!!!!!! THANK YOU!!
    I was told you would probably help me find the right answer by Hans-g!
    Thanks again!

  • Spry Tabbed Panels and Pop Up Link from Image Hotspot

    I've created an image map with Hotspot links to either send to another web page or to open a previously created Pop Up window with information.
    I've imported my image, image map and Hotspots into a tab
    The issue I'm having is when clicking on the hotspot (within the Spry tabbed panel), to open the pop up page; it doesn't work
    If I select a Hotspot which sends users to another web page, that works ok.
    Would appreciate it if someone else who has run into this and what your recommendation is for a fix.
    thanks, R Silva

    Hi,
    Unable to post to a public server; however I've attached the files so the code can be reviewed.
    thanks

Maybe you are looking for

  • Content server and Dynamic image in PDF

    Hi all, I am trying to make up a PDF through SFP transaction in ABAP that has a photograph included in it. This photograph is saved in the content server. The photograph that is inserted depends on a certain number of data and the URL of the picture

  • 2 podcast list, right one won't show to sync with iPhone

    I synced my iPhone 4 with my MacBook today. I havn't done that in quite some time. I now have 2 Podcasts list (I didn't notice a second one there before today) and the 2nd/new one only has 1 of my podcasts listed in it. My other Podcast list has all

  • Why not sql in servlet?

    Hello, It seems we can do everything EJB can do with only servlets and jsp so why should I use enterprise beans? I know this has been discussed in other threads but I didn't see the reasons for encapsulating the sql queries there. My app uses servlet

  • SAP DMS Certification

    Hi Friends, Can we do ceertification in SAP DMS. I searched, but couldn't find out. I know we can doin PLM. If there is any code for this pls. let me know. Regards, Sai Krishna

  • HTMLB Tabstripitem height issues in NW07 (NW04s)

    We have an iView that initially displays with 3 tabs, and the content in the tabs are of varying heights. The 1st tab (initial tab to display) no longer dynamically sizes to the height of the content, but instead displays to the height of the largest