Collapsable Panel Nav

I am trying to create a vertical navigation bar that has 5 large main categories and then up to 15 sub pages underneath. I want the 5 large main categories to autocollapse but also when someone navigates to a sub-page it highlights that particular nav button and also keeps that menu group expanded. I like things neat and tidy but also like the web visitor to know where they are at all times.
I tried a pure collapsable panel with hotlinked graphic buttons. But, I cannot achieve the auto open when at a sub page. (maybe if I bail on template mode?) Then I tried to place a Spry nav within the sub collapsable panel but again that does not achieve my goals.

As far i understand you want the last opened panel to be open on other pages that the user might go to..
What you could use is cookies to save the last used state example: go.spry-it.com/cookie

Similar Messages

My Spry collapsable panel works on Dreamweaver but not on my published site

I created a one page static microsite for a client and inserted Spry collapsable panel in the content div. It looks perfect on Dreamweaver and even when I previewed it on Chrome, Firefox, and Safari, it looked great. After I uploaded the page, the panel's dissapeared and the text center justified. Any help?
The site is http://www.laurawoodsexposed.com (it's a political website, not a porn website)
Any help would be great.

I created a one page static microsite for a client and inserted Spry collapsable panel in the content div. It looks perfect on Dreamweaver and even when I previewed it on Chrome, Firefox, and Safari, it looked great. After I uploaded the page, the panel's dissapeared and the text center justified. Any help?
The site is http://www.laurawoodsexposed.com (it's a political website, not a porn website)
Any help would be great.

Problem w/ Tooltips & Collapsable Panels in Safari

Hi,
I have a page that has Collapsable panels along with Tooltips
that are used for a help tip in each panel. My problem is when the
page loads in Safari, the contents of the bottom most Col Panels
are displayed elsewhere in the page. The Col Panels tabs and
containers remain where they should though.
Heres a page displaying the issue:
http://dev.meetingsintelligenceexchange.com/planner/tooltip.php
There are 2 columns with 3 Panels in each. All of the Panels
have a help icon in tab of the panel that acts as the Tooltip
trigger. If you collapse the top most panel in each column then
reopen it, the layout corrects itself.
I can't figure out what is happening. I've tried removing the
help icon to see if the float is causing the problem but it still
occurs.
Any help would be appreciated.
Thanks, Scott

ThanQ everyone for reviewing my problem. I solve the issue myself... ThanX...

Spry Tabs + Collapsable Panels

Hello,
I have tabs within collapsable panels and in firefox and IE you can see the tabs even if that panel is not open. Any ideas on how to fix this situation?
Thanks, here's my example:
http://www.robvanwyen.com/cv/rfblair/
Best,
Rob

V1 Fusion I was going through Spry forums and saw a problem
that another user had similiar to mine and was wondering if you
could offer some support. I am using the Tabbed panel from Spry and
can only get 5 tabs across before it starts a new tab below the
others. I was looking thru CSS file but not sure what can be
changed so I can allow 6 tabs accross. I'd send you link but it's
behind a firewall. I can send you a screen shot with email address.
Any help greatly appreciate it!!!!!!

CS4: Collapsed panels won't stay open

I messed up my regular workspace view and reverted to a preset and noticed the collapsed panels won't stay open when expanded. I'm not sure if this is how it used to work, but it just feels wrong.
Let's say I want to move an object to another layer. I click on the collapsed Layer-panel icon to open it, then select (click) the object on artboard and Layer panel collapses back to icon. Then I need to click the panel icon again to open it and now I can move the object to another layer, but layer panel collapses again when I select another objet.
I remember having this same UI problem with Flash CS4. Have I messed up some setting, or is this really how UI works in Illustrator? I would like to save screenspace by having panels collapsed and only keeping open the one I need. InDesign works like this, keeping expanded panels open until they are collapsed again.

Thank you! It must've have switched on when I reverted to another screenset, because I can't remember ever seeing this setting (or even reading about it).

Collapsable Panel Group: close previous panel on next panel focus

Hello All,
I am playing around with Spry and started off with the Accordian. But I wanted to be able to 'expand all' so moved on to the collapsable panel.
However, I also want the accordian effect, whereby when one panel is clicked and opened, the previous panel will close. Is there a variable to include in the collapsablepanelgroup to acheive this?
Looking at it another way, I want to 'close open panel(s), open new panel', when the mouse clicks on the new panel.
I'm using Spry Pre-Release 1.6.1
You can see my efforts so far at http://yabbox.com/spry.php
Many thanks for your help and direction.
Andy

My first answer would be.. Use the accordion ;D
However, I also want the accordian effect, whereby when one panel is clicked and opened, the previous panel will close. Is there a variable to include in the collapsablepanelgroup to acheive this?
Not with out modifications to the collapsible panel code.
But you could just create a custom for you that remembers the previouse panel that was clicked...
and add onclick="" to each panel tab to activate the function

Issues with spry collapsable panel

hey guys, i am very new, thank you in advance for your patience. i posted this in the spry forum as well.
i created a spry collapsable panel with 3 drop down options. when i preview the object in a browser, there is a blue box around the object, i presume to tab around the page. how do i get rid of this? i have done all i know in CSS, is this a JS issue? how can i get rid of it?
thank you for dealing with my ignorance!
-rick

this was answered in the spry forums.
http://forums.adobe.com/thread/506212?tstart=0

Collapsable panel orientation

Is there a way to get a collapsable panel to open to the
right instead of to the bottom? Basically take a the panel and lay
it on it's left side.
Thanks

Hi,
did you try the sliding panels widget?
You can see an working
sample
here.
Thanks,
Diana

Collapsable Panel

In Swing how to implement a collapsable Panel , similar like task panes

As much as I'm against posting whole classes, in your case I'll make and exception. I hop ethis class is useful, atleast I found it suited my purposes.
import java.awt.*;
import java.awt.event.*;
import java.util.*;
import javax.swing.*;
import javax.swing.border.*;
import javax.swing.plaf.*;
import javax.swing.table.*;
* Emulates a Task Pane component
* Example Usage:
* Vector<Object> fileGroup = new Vector<Object>();
        fileGroup.addElement("File Tasks");
        fileGroup.addElement( new Action[] {newOrgAction, openOrgAction, closeOrgAction } );
    Vector<Object> editGroup = new Vector<Object>();
        editGroup.addElement("Edit Tasks");
        editGroup.addElement( new Action[] {addMemberAction, addMultiMember,
                                            editProfileAction, deleteProfileAction,
                                            saveDatabaseAction } );
    Vector<Object> displayGroup = new Vector<Object>();
        displayGroup.addElement("Display Options");
        displayGroup.addElement( new Action[] {quickEditAction, showFTotalsAction,
                                            genListAction, freezeNamesAction});
    Vector<Object> toolsGroup = new Vector<Object>();
        toolsGroup.addElement("Tools");
        toolsGroup.addElement( new Action[] {formBuilderAction, dirCleanerAction} );
    Vector<Object> actions = new Vector<Object>();
        actions.addElement(fileGroup);
        actions.addElement(editGroup);
        actions.addElement(displayGroup);
        actions.addElement(toolsGroup);
    taskPane.setTaskActions( actions );
public class TaskPane extends JPanel {
    public JButton closer;
    public JLabel titleLabel;
    public Vector<Object> taskActions;
    public JPanel taskArea;
    //util
    private String titleText = "";
    public TaskPane(String title) {
        this(title, (Vector<Object>)null );
    public TaskPane(String title, Vector<Object> actions) {
        super( new BorderLayout() );
        setTitleText(title);
        setBackground(Color.white);
        add( getTitleLabel(), BorderLayout.NORTH );
        setTaskActions(actions);
    public void setTitleText(String title) {
        titleText = title;
        createTitleLabel();
    public String getTitleText() {
        return titleText;
    public void setTaskActions(Vector<Object> actions) {
        taskActions = actions;
        if(taskArea != null) {
            taskArea.removeAll();
        createTaskArea();
        validate();
        repaint();
    public void createTitleLabel() {
        titleLabel = new JLabel( getTitleText() );
        titleLabel.setOpaque(true);
        titleLabel.setBackground( new Color(30,30, 110) );
        titleLabel.setForeground(Color.white);
        Font defont = UIManager.getDefaults().getFont("Label.font");
        titleLabel.setFont( new Font(defont.getFamily(), Font.BOLD, defont.getSize() ) );
        //titleLabel.setPreferredSize( new Dimension(180, 20) );
        titleLabel.setBorder( BorderFactory.createEmptyBorder(3,3,3,3) );
    public Component getTitleLabel() {
        if(titleLabel == null) {
            createTitleLabel();
        return titleLabel;
    public void addAction(Action action) {
        if(taskActions == null) {
            taskActions = new Vector<Object>();
        taskActions.addElement(action);
        taskArea.add( getTaskButton( action ) );
        validate();
        repaint();
    public void createTaskArea() {
        if(taskArea == null) {
            taskArea = new JPanel();
            taskArea.setLayout( new BoxLayout(taskArea, BoxLayout.Y_AXIS) );
            taskArea.setBackground(Color.white);
        if( taskActions != null) {
            for(int i = 0; i < taskActions.size(); i++) {
                if(taskActions.elementAt(i) instanceof Action) {
                    taskArea.add( getTaskButton( (Action)taskActions.elementAt(i) ) );
                    taskArea.add( new JSeparator() );
                } else if( taskActions.elementAt(i) instanceof Vector ) {
                    Vector<Object> group = (Vector<Object>) taskActions.elementAt(i);
                    String title = group.elementAt(0).toString();
                    Action[] actions = (Action[])group.elementAt(1);
                    TaskGroup tgroup = new TaskGroup(title, actions);
                    taskArea.add(tgroup);
        ScrollablePanel area = new ScrollablePanel( new FlowLayout(FlowLayout.CENTER) );
            area.setBackground(Color.white);
            area.add( taskArea );
        JScrollPane scroller = new JScrollPane( area );
            scroller.getViewport().setBackground(Color.white);
        add( scroller );
    public JButton getTaskButton(Action action) {
        final JButton taskButton = new JButton(action);
            taskButton.setBackground(Color.white);
            taskButton.setBorder( //BorderFactory.createCompoundBorder(
                                    //BorderFactory.createLineBorder(Color.black) ,
                                    BorderFactory.createEmptyBorder(3,5,3,3) /*)*/ );
            taskButton.setForeground( new Color(140, 140, 255) );
            taskButton.setHorizontalAlignment( JLabel.LEFT );
            taskButton.setPreferredSize( new Dimension(140, 20) );
            taskButton.setCursor( Cursor.getPredefinedCursor(Cursor.HAND_CURSOR) );
            taskButton.addMouseListener( new MouseAdapter() {
                public void mouseEntered(MouseEvent e) {
                    taskButton.setForeground( new Color(0, 0, 80) );
                public void mouseExited(MouseEvent e) {
                    taskButton.setForeground( new Color(140, 140, 255) );
            if(taskButton.getIcon() == null) {
                taskButton.setIcon( new EmptyIcon() );
        return taskButton;
    public void expandAll() {
        for(int i = 0; i < taskArea.getComponents().length; i++) {
            Component c = (Component) taskArea.getComponent(i);
            if(c instanceof TaskGroup) {
                ((TaskGroup)c).expandTasks();
    public void expandTaskGroup(String title) {
        for(int i = 0; i < taskArea.getComponents().length; i++) {
            Component c = (Component) taskArea.getComponent(i);
            if(c instanceof TaskGroup) {
                TaskGroup tg = (TaskGroup)c;
                if(tg.getTitleText().equalsIgnoreCase(title.trim()) ) {
                    tg.expandTasks();
    class TaskGroup extends JPanel {
        JLabel groupTitle;
        String titleText;
        Action[] actions;
        JPanel actionsPanel;
        Border up = BorderFactory.createMatteBorder(0, 0, 1, 0, new Color(0,50,110));
        Border down = new JLabel().getBorder();
        public TaskGroup(String title, Action[] actions) {
            super( new BorderLayout() );
            setTitleText(title);
            setActions(actions);
            setBackground(Color.white);
            setBorder( BorderFactory.createEmptyBorder(3,3,5,3) );
        public void setTitleText(String title) {
            titleText = title;
            createTitle();
        public String getTitleText() {
            return titleText;
        public void createTitle() {
            groupTitle = new JLabel( " + " + getTitleText() );
            groupTitle.setOpaque(true);
            //groupTitle.setBackground( new Color(170, 170, 220) );
            groupTitle.setBackground( UIManager.getColor("Table.selectionBackground") );
            groupTitle.setForeground(Color.black);
            Font defont = UIManager.getDefaults().getFont("Label.font");
            groupTitle.setFont( new Font(defont.getFamily(), Font.BOLD, 10 ) );
            groupTitle.setPreferredSize( new Dimension(175, 20) );
            //groupTitle.setBorder( up );
            groupTitle.addMouseListener( new MouseAdapter() {
                public void mouseClicked(MouseEvent e) {
                    if(actionsPanel.isShowing()) {
                        remove(actionsPanel);
                        groupTitle.setText(" + " + getTitleText() );
                        //groupTitle.setBorder(up);
                    } else {
                        add( actionsPanel, BorderLayout.CENTER );
                        groupTitle.setText(" - " + getTitleText() );
                        //groupTitle.setBorder(down);
                    validate();
                    repaint();
            add( groupTitle, BorderLayout.NORTH );
        public void setActions(Action[] actions) {
            this.actions = actions;
            if(actionsPanel != null) {
                actionsPanel.removeAll();
            createActionsPanel();
        public Action[] getActions() {
            return actions;
        public void createActionsPanel() {
            actionsPanel = new JPanel( new GridLayout(0,1,5,5) );
            actionsPanel.setBackground(Color.white);
            for(int i = 0; i < actions.length; i++) {
                actionsPanel.add( getTaskButton( getActions()) );
//add( actionsPanel, BorderLayout.CENTER );
public void expandTasks() {
if(actionsPanel.isShowing()) {
return;
add( actionsPanel, BorderLayout.CENTER );
groupTitle.setText(" - " + getTitleText() );
validate();
repaint();
}ICE

Collapsable Panel Group: Button Toggle

Hello,
I have a Collapsable Panel Group with the buttons 'open all' and 'close all'
Is there a way to make this into one button which toggles? So, if they're open, then close, and vice versa.
<input type="button" value="Open All" onclick="cpg.openAllPanels();" />
<input type="button" value="Close All" onclick="cpg.closeAllPanels();" />
Thanks for any info.
Andy

Thanks for that, works just fine.
I put it into the SpryCollapsiblePanel.js file with this explanation.
// extra code to make the [open all], [close all] buttons into one toggle button. Thanks to http://forums.adobe.com/people/.V1
// works with this button in the main code .. <input type="button" value="Toggle" onclick="toggle();" />

Collapsable Panel conflict?

I am having an issue with a page containing a Spry horizontal menu bar ( which works fine) and a Spry Collapsable Panel (which does not). The page also contains a WOW jQuery Slider which is functioning correctly with the menu bar so I do not believe it involves a conflict of Javascript vs. jQuery scripts on the same page. When I placed the panel it simply fails to collapse in either Dreamweaver's live view or on any browser. Has anyone seen this in the past? Amy ideas?
Thanks in Advance.

Please post a link so we can see the problem page in our browsers.

Quick Collapsable Panel Question

Hi,
Working with the Collapsable Panel within the Sliding Panel framework. So far all is going and gone well. One minor thing. I want the collapsable panels to be closed on default. I did add this piece of coding
<script type="text/javascript"> var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", { contentIsOpen: false }); </script>
in the head of my document but looks like I am missing something else here.
Appreciate any help on this and thanks in advance.
URL: Easy Excel Newsletter Display

Hi,
The basic code for four collapsible panels is as follows
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryCollapsiblePanel.js"></script>
<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>
<div id="CollapsiblePanel2" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">Content</div>
</div>
<div id="CollapsiblePanel3" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">Content</div>
</div>
<div id="CollapsiblePanel4" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">Content</div>
</div>
<script>
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", { contentIsOpen: false });
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", { contentIsOpen: false });
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", { contentIsOpen: false });
var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4", { contentIsOpen: false });
</script>
</body>
</html>
You will notice that there are 4 constructors, one for each panel and that these constructors are placed after the CollapsiblePanel regions.
I hope this helps.
Ben

Spry collapsable panel transparency

hey all,
i have a spry collapsable panel, when it drops down, i want it to have a 100% opacity white background. when i simply code background:#FFF, it is completely transparent. when i use a different color (i.e. #666), the color still exists, but it is transparent. how can i make this a solid dropdown box?
thanks!

this was just a test, but i can paste some code
.CollapsiblePanelTab {
font: bold 10pt sans-serif;
background-color:#FFF;
margin: 0px;
padding: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-decoration: none;
outline: none;
and a screenshot of the active tab
i hope this is enough

Collapsing panel in Photoshop issue

hi,
I have a CS SDK panel deployed in all the 3 applications - Photoshop, Illustrator and InDesign. My panel has a login component and users need to log in before using it.
1) In Photoshop, when a logged in user collapses the panel, works on Photoshop and activates the collapsed icon, the panel goes back to the login screen and they are forced to login every time. This behavior does not occur in Indesign and Illustrator.
Can you please tell me if there are any workarounds for this issue?
Other discrepencies between the apps -
2) In Illustrator, when the panel is closed entirely and re-opened under Extensions > <panel name>, users are not taken back to the login screen. They are forced to quit Illustrator and restart it in order to re-login to the panel. This does not happen in InDesign and Photoshop.
thanks for any help in this regard.

As you've found, each application behaves differently with respect to lifecycle of the extension. Here we have a range of behaviors - on one end of the spectrum we have Photoshop which greedily unloads extensions whenever possible, and at the other end we have Illustrator which doesn’t unload an extension when it is closed through the UI.
For #1, you have a couple of choices.
Maintain the state of your extension somewhere that will persist between loading/unloading (e.g. on disk). When your extension is loaded, check this persistent state to see which UI you should present to the user.
Use CSXSInterface.evalScript(“PhotoshopPersistent”) which will prevent Photoshop from unloading the panel when it is collapsed.
For #2, you theoretically shouldn’t have to login again, since your panel has not be unloaded. As far as I know, Illustrator does not expose a similar mechanism for forcing an unload, although the Illustrator forum may be a better place to get a more definitive answer.

When placing each search result in its own collapse panel, only first panel works (PHP foreach loop)

Hi there,
<?php foreach ($results as $result): ?>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
    <div class="CollapsiblePanelTab">
<?php echo htmlspecialchars($result['name'], ENT_QUOTES, 'UTF-8'); ?>
    </div>
    <div class="CollapsiblePanelContent">
<?php echo htmlspecialchars($result['description'], ENT_QUOTES, 'UTF-8'); ?>
    </div>
</div>
<?php endforeach; ?>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
</script>
Above is the segment where I want to generate a list of results using PHP/SQL. I know for sure that there isn't anything wrong with the PHP, there's something about the collapsible panels that I can't get my head around...
WHAT I WANT IT TO DO:
Display the result of my query, each in a collapsible panel with the Name in the panel's tab and the additional Description on the panel's content area. Do this for all results.
WHAT IT DOES:
The above, except that only the first collapsible panel works (collapses fine). The results following are still in collapsible panels with the exception that they don't collapse at all.
So can anyone come up with a good solution to fix this? Something quick will do (that I don't have to make drastic changes to my code), I suspect that it has something to do with this line:
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
That it recognizes the first panel as CollapsiblePanel1, the other panels are just unknown... I don't know, that's all I can come up with. Thanks for your time.

Thanks for the tip Gramps, got to the solution!
<?php foreach ($results as $result): ?>
<div id="CollapsiblePanel<?php echo htmlspecialchars($result['id'], ENT_QUOTES, 'UTF-8'); ?>" " class="CollapsiblePanel">
    <div class="CollapsiblePanelTab">
<?php echo htmlspecialchars($result['name'], ENT_QUOTES, 'UTF-8'); ?>
    </div>
    <div class="CollapsiblePanelContent">
<?php echo htmlspecialchars($result['description'], ENT_QUOTES, 'UTF-8'); ?>
    </div>
</div>
<script type="text/javascript">
var CollapsiblePanel<?php echo htmlspecialchars($result['id'], ENT_QUOTES, 'UTF-8'); ?> = new Spry.Widget.CollapsiblePanel("CollapsiblePanel<?php echo htmlspecialchars($result['id'], ENT_QUOTES, 'UTF-8'); ?>");
</script>
<?php endforeach; ?>
By allowing the script to loop and matching the id. Nice suggestion for the accordion but unfortunately the code above was just an example... the actual results will include tables, <hr> and whatnot.
Being new to the Dreamweaver scene (actually to be honest, I've only started learning about web development a week ago) why are the Spry js (or just Spry in particular) files so large? Are there plugins/methods I can get to delete some features I don't need? I have absolutely no experience with JS... yet.

Collapsable Panel Nav

Similar Messages

Maybe you are looking for