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

Similar Messages

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

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 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

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).

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 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

Vendor search by "Account group" and "Previous acct no."

Hello All,
I am not able to search vendor by 'Account group" and "Previous acct no.". I am sure these search critarions were there in version 4.7 but i am not getting the same in ECC.
Please suggest.
Cheers,
Manish Jindal

I would appreciate the quick help on this.
Cheers,
Manish Jindal

After opening firefox to a site and then close to go to another site i get a message "Firefox already open have to close previous site or restart compter"

When I open Firefox and go to a site and then close to go to another site it will not let me open the site. a message tells me Firefox is already running and have to close previous site or restart my computer. Only way to continue is to restart computer
Also have 500 Internal Server Error

When I open Firefox and go to a site and then close to go to another site it will not let me open the site. a message tells me Firefox is already running and have to close previous site or restart my computer. Only way to continue is to restart computer
Also have 500 Internal Server Error

Collapsable Panel Group: close previous panel on next panel focus

Similar Messages

Maybe you are looking for