Help using Collapsible Panels

I hope someone out there can help me with this, or at least
point me in the right direction.
I'm using the Spry Collapsible Panels for a personal website,
but I would like to use a seperate image for each paneltab. I have
four collapsible panels, and I created an 'up' and 'down' image for
each tab. I managed to adjust the CSS so each tab has a different
image on the 'open' and 'closed' state, it's the 'hover' state that
doesn't let me set a different image per tab.
Anyone out there knowledgable enough on this subject (and
willing, of course) to point me to a solution?
Thanks!!

I'm also looking for a way to have different rollover images
on each tab of my accordion panels. Any help or ideas would be
great!

Similar Messages

Help with collapsible panel in DW

I created a collapsible panel on my webpage and it's on-load state (when you open it in a browser and/or refresh the page) is open, meaning when I first open the page or refresh it the panel is open. I would like for it to be closed (in the on-load state. When you intially open the page in a browser) so that the visitor can just see the small tab and click on it if they choose to do so. My collapsible panel that I used is the standard one in Dreamweaver. Here's a link to my files (note: the one you want to pull up is: indextest.html and/or abouttest.html (either work) and SpryCollapsiblePanel.js): http://www.test.ashleysperrydesigns.com/
Thanks for the help in advanced.
ashmic

Add the highlighted part
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet">
</head>
<body>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">Content</div>
</div>
<script src="SpryAssets/SpryCollapsiblePanel.js"></script>
<script>
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
</script>
</body>
</html>
Gramps

Simple collapsible panels question...

(Thought I'd give this forum a try. The other discussion
category gets no traffic! It seems this is where the action is.)
I'm putting collapsible panels on the left side of web page
to be used as a sort of menu list that links to the rest of the
website. Some "tab" sections will have stuff in its associated
"content" section, namely some text that will link to other parts
of the website. Other "tab" sections will have nothing in its
"content" section, but I want to use the text in these tabs to be a
link. In other words, I have no use of the content section for
these tabs. I did a quick test and made the text in a tab to link
to another page, but it didn't do anything (though the "content"
section links of other tabs worked fine). Should I simply delete
this part: <div class="CollapsiblePanelContent"></div>
Here's an example of the web page, though it is still very
much under construction, and no links put in place yet in any of
the "tab" sections of the collapsible panels:
http://www.freywine.com/NewSiteExamples/index4.html
(I just want you to see how I'm using the collapsible panels, and
how the "Home" and "Order Here," for example, will have no text in
their "content" sections of the collapsible panels. Naturally, the
parts with the downward pointing triangle will have text with links
in their "content" sections.)
Basically, the question is: what's the best way to have the
tab section be just a link and the content section to not be there
at all. I suppose I could simply not use collapsible panel code,
but then I would have to figure out how to fit a non-collapsible
panel div to fit right snug between all the collapsible panels (I'm
still very much a newbie with CSS).
Any simple way to deal with this?
I've attached the complete collapsible panel code for the one
which has the tab text as a link and nothing in the content area.
Thanks for the help!
<div id="CollapsiblePanel2" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0"><a
href="
http://freywine.stores.yahoo.net/">Order
Here</a></div>
<div class="CollapsiblePanelContent"></div>
</div>

Youre on the right lines. Just rip all of the collapsible
stuff out
which surrounds the actual link, as shown in the code below.
The code shows the 'Home' and the 'Order Here' <divs>
as your code
should be, plus the opening collapsible <div> of the
'Wine' tab.
Note the 'combined' css classes 'CollapsiblePaneltab' and
'CollapsiblePanel'(leave a gap between them as shown) The
reason for
this is the brown bar to the left of the tab takes its
properties from
the 'CollapsiblePanelTab' css PLUS you need to add some
inline left
padding to get the link to line up under one another.
<div id="sidebar1">
<div class="CollapsiblePanelTab CollapsiblePanel"
style="padding-left: 7px"><a href="
http://www.bbc.co.uk">Home</a></div>
<div class="CollapsiblePanelTab CollapsiblePanel"
style="padding-left: 7px"><a href="
http://www.bbc.co.uk">Order
Here</a></div>
<div id="CollapsiblePanel3" class="CollapsiblePanel">
brainfillet wrote:
> (Thought I'd give this forum a try. The other discussion
category gets no
> traffic! It seems this is where the action is.)
>
> I'm putting collapsible panels on the left side of web
page to be used as a
> sort of menu list that links to the rest of the website.
Some "tab" sections
> will have stuff in its associated "content" section,
namely some text that will
> link to other parts of the website. Other "tab" sections
will have nothing in
> its "content" section, but I want to use the text in
these tabs to be a link.
> In other words, I have no use of the content section for
these tabs. I did a
> quick test and made the text in a tab to link to another
page, but it didn't do
> anything (though the "content" section links of other
tabs worked fine). Should
> I simply delete this part: <div
class="CollapsiblePanelContent"></div> ?
>
> Here's an example of the web page, though it is still
very much under
> construction, and no links put in place yet in any of
the "tab" sections of the
> collapsible panels:
http://www.freywine.com/NewSiteExamples/index4.html
(I just
> want you to see how I'm using the collapsible panels,
and how the "Home" and
> "Order Here," for example, will have no text in their
"content" sections of the
> collapsible panels. Naturally, the parts with the
downward pointing triangle
> will have text with links in their "content" sections.)
>
> Basically, the question is: what's the best way to have
the tab section be
> just a link and the content section to not be there at
all. I suppose I could
> simply not use collapsible panel code, but then I would
have to figure out how
> to fit a non-collapsible panel div to fit right snug
between all the
> collapsible panels (I'm still very much a newbie with
CSS).
> Any simple way to deal with this?
>
> I've attached the complete collapsible panel code for
the one which has the
> tab text as a link and nothing in the content area.
Thanks for the help!
>
> <div id="CollapsiblePanel2"
class="CollapsiblePanel">
> <div class="CollapsiblePanelTab"
tabindex="0"><a
> href="
http://freywine.stores.yahoo.net/">Order
Here</a></div>
> <div class="CollapsiblePanelContent"></div>
> </div>
>

Dreamweaver CS4 collapsible panels not working

I've used collapsible panels on pages many times before with no problem. But for some reason, on the page below, they're not "working" - no opening or closing. They just appear in an open state at all times.
In Dreamweaver, I have the Display setting to Open, the Default state to Closed, and I have enabled animation.
I know this must be something very obvious.If anyone could take a look and see if you see what I'm missing, I'd sure appreciate it. I searched the Spry forum and came up empty.
Here's the page:
http://nasr.hostasaurus.com/faq.htm

Place the constructors above swfobject as follows
<script type="text/javascript">

</script>

Need help to modify Spry Collapsible Panel js settings

I posted this in the DW forum, but then found this which seems to be more appropriate....sorry if I'm screwing things up....
I would very much appreciate if some could help me get rid of the light blue (cyan?) colored blurred 4-6 px frame that appears around the tabs when they're in focus. Or is this a behaviour built into the browsers?
TIA
Dan

Hi Dan,
I am sorry putting you in the same class as the majority.
In your case you will probably already know that the CSS file contains everything necessary for styling the widget, and the JavaScript file gives the widget its functionality.
That is why I give Newbies the advice to definately not touch the JavaScript files.
In your case you are looking at an unwanted border around the selected panel tab. This sounded like a styling matter and, until I have seen an online page containing the problem to prove otherwise, I am staying with my resolution that it is a styling problem. I am even more convinced when I look at a Spry Collapsible Panel that uses the original unadultorated JavaScript and Stylesheets which does not have that problem.
I hope this helps.
Ben
BTW, I enjoy these discussions because I learn from them. So please give it back to me and prove me wrong.

Preventing overlapping divs (using spry collapsible panel)?

I'm using a collapsible panel. below that is another div.
When user clicks on collapsible panel it revelas it content. The following div with content(i.e. <div class=""> </div>
             <div class="clean-graypop">
               <input type="radio" value="a" name="question1" />...) moves down. At least when viewed in a browser.
However, when viewed in print preview, and when printed. the contents of the collapsible panels now overlaps the content of the following div contents
<p><strong>Part 1: Statistical inference</strong></p>
            <p> Questions revealed and hidden using buttons.</p>
            <div id="CollapsiblePanel2" class="CollapsiblePanel">
              <div class="CollapsiblePanelTab" tabindex="0"><a href="#" target="_self" class="button"><span>Question 1</span></a><br />
                <br />
              </div>
              <div class="CollapsiblePanelContent">
                <p>Read the following statements (1-5) about measures of effect in epidemiological studies. </p>
                <ol>
                  <li>A measure of effect is a quantity that measures the effect of a factor on the frequency or risk of an outcome.</li>
                  <li>The incidence of a disease cannot be calculated in a case-control study because the controls represent an unknown fraction of the whole population.</li>
                  <li>Rate ratios, risk ratios, odds ratios, differences between means and differences between medians can all be used as effect measures in both cohort and intervention studies.</li>
                  <li>The only measures of effect that can be calculated in a cross-sectional study are prevalence ratios and odds ratios. </li>
                  <li>A prevalence ratio can be calculated in an ecological study.</li>
                </ol>
                <p>Which one of the following options (a-e) is correct?</p>
              </div>
            </div>
            <br />
            <div class=""> </div>
            <div class="clean-graypop">
              <input type="radio" value="a" name="question1" />
              a) Statements 1 and 2 are correct<br />
              <input type="radio" value="b" name="question1" />
              b) Statements 1, 3 and 5 are correct<br />
              <input type="radio" value="c" name="question1" />
              c) Statements 1, 2, 3 and 4 are correct<br />
              <input type="radio" value="d" name="question1" />
              d) Statements 2, 3, 4 and 5 are correct<br />
              <input type="radio" value="e" name="question1" />
              e) All of the statements are correct<br />
            </div>
            <br />

Define a media type CSS for print that compensates. Read here: http://www.w3.org/TR/CSS2/media.html
Mylenium

Need help with spry collapsible panel (menu)

I learn as I go when I created my website http://www.invitation-fascination.com/shapes.html and so far I've created a page with 13 spry collapsible panels- I think it came out pretty well. Now this is what I want to add to the page:
I want to create a selector (drop down) menu above the panels with the option to select any one of the 13 panels.
Once selected it will move directly to that panel and open it.
I've tried the piselect thing and with the "open" and "close" button that will programatically open the panels, but what I want is for the panel to be selected from the menu and then the page goes directly to that panel and it then opens.
Is there a way this can be done? Please help
I'm really not that good at this stuff- please be easy with your response- thank you

Have a look at the last example http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
Gramps

Help with spry collapsible panel

I have several spry collapsible panels that I am using for
navigation and want an open panel to close automatically when a new
one is opened. Can this be done? I checked the "customuze this
widget" in the property inspector but does not give any info on the
behavior of them. I am sure it is in the java code but I am not a
Java expert by any means.

Have a look at the last example http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
Gramps

My Illustrator does not allow me to change colors using swatches panel. Help pleas.

Few days ago I started having strange problems with my Illustrator CS5 application. I am using MacBook Pro with Intel Processor. After major update on the Mac OS few days ago I noticed I can not change colors in my drawings using swatches panel. The function on my Illustrator CS5 stopped working. When I select object and try to change its fill or stroke color using fill and stroke from the options bar above work space, none of the swatches would work. The are there how ever nothing hapends when I select them, the color remains the same.The same thing happens if I try to use the swatch panel, I select the object then I try to select new color from swatch but the fill or stroke does not change. I can only change color on my drawings using the color panel but that is not useful for me since I need to get precise colors using approved color swatches ether from pantone library or approved by client.
The other strange thing is my selection tool does not deselect when I click outside on or of the artboard, the object remains selected until I reselect another object or use the keyboard short cut to deselect it.
I have tried various options to resolve the issue from deleting and reseting preference to completely uninstalling and reinstalling Illustrator CS5. I even installed back my old CS4 version because I had to complete a project and the same issue is happens there as well. I also reset the application using Time Machine from few months ago when it was working correctly. What happens when I reset or reinstall the app, it works for about 10 min correctly as it should and and then it reverts to the same problem. I am out of options and do not know what else I could do to fix this. Right now I am working on my old Mac tower G5 and CS4 where everything works as it is suppose to, but I really need to get this fixed. Can any one help or has solution for my problem? Please.

hey i m working on my illustrator and i m having many problems with my swatches
for example i use the green phosphorique i don't get this color i get another green
and many colors too it's like illustrator chooses for you the only green color
so please i kind of need help i can show you pictures of that i print screen viewed them.. so anybody who can help... pleaaaaaaaaaase contact me because i m having a project now..
my e mail is [email protected] i would be thankful
i even tried to download the illustrator on my friend's computer also i m having this problem ....

Using Spry Collapsible Panels

How do I set up a function to open or close all collapsible
panels with JavaScript? Do I need functions, or is there an
existing function that can do this? My panels are named
sequentially:
CollapsiblePanel1
CollapsiblePanel2
Thanks for any help; I want to create an announcements list
and let visitors quickly open or close all panels.

Try a CollapsiblePanelGroup widget.
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
Check the bottom sample.

Collapsible panel mouseover code trouble-help!

i have several collapsible panels on my page and i want them
to open on a mouseover and close on a mouseout. i changed the code
in the SpryCollapsiblePanel.js widget file on line 208 (code is
attached below) from
"Spry.Widget.CollapsiblePanel.addEventListener(tab,
"mouseover", function(e) { return self.onMouseOver(e); }, false);"
TO -> "Spry.Widget.CollapsiblePanel.addEventListener(tab,
"mouseover", function(e) { return self.onTabClick(e); }, false);"
after reading a previous post instructing to do so. this
allows the panel to open on a mouseover, but requires another
mouseover to close the panel. if i change line 209 to
"Spry.Widget.CollapsiblePanel.addEventListener(tab,
"mouseout", function(e) { return self.onTabClick(e); }, false);"
this allows the panel to close on mouse out, but only applies
to the tab area of the collapsible panel. when your mouse moves
down to click on a link in the content area of the collapsible
panel, the panel closes before you can click on a link. how can i
get the mouseout function to apply to the entire panel and not just
the tab area of the panel? help!

hi,
thanks, that is what i am looking for.
again thank u very much.
regards,
shiv

Need help with Spry Collapsible panels

I'm fairly inexperienced with Dreamweaver (CS4) and especially new to the Spry feature, so bear with me... I need all the help I can get! I've inserted six Spry collapsible panels to an HTML page and uploaded everything (including SpryCollapsiblePanel.css and SpryCollapsiblePanel.js), but they're automatically displaying as open and I can't click on them or close them. I'd like them to be closed until selected and opened.
What am I doing wrong?
Here's the URL: http://www.nicolegriffith.com/trustm.html
Thank you!

I just looked at your code, and your SpryAssets content is not there. This is the extent of your SpryCollapsablePanel.js
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="en" lang="en">
<head>
<title>404 - Not Found</title>
</head>
<body>
<h1>404 - Not Found</h1>
</body>
</html>
Make sure your spry assests folder is in your root directory and upload the files once you know they are where they should be.
Gary

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

Collapsible Panel - Tab start closed?

Hello
Just began working with Spry and I'm going to use the
Collapsible Panels to display multiple lists, each form a different
year, beneath eachother. Therefore I wanted the top list to start
as open, just as it normally does - but the rest that followed
would start as closed. I'll code the PHP to assign the tabs their
classes based on their position myself, but I just need help with
how to give a tab the closed-value.
Do I need to temper with the .js-file, or is it enough to
change the class of the tab-div to CollapsiblePanelClosed for
instance. I tried the latter, but it didnt work. In addition I
couldn't find the class CollapsiblePanelClosed represented in the
.css-file either.
Short example:
2007 (begins open and displays its content)
- item 01
- item 02
- item 03
2006 (begins closed)
2005 (begins closed)
etc.
Thanks,
Eirik

Hi Eirik,
you should better use Collapsebile Panel group. We can find
an working example
here.
Diana

Help using Collapsible Panels

Similar Messages

Maybe you are looking for