Collapsable Panel Question

am trying to have a several tabs right next to each other
that have drop down panels that are wider than the tabs them
selves...
say a row of tabs 100px wide 125px high with 5px margin
between them that have dropdown panels with widths of 500px, all
while keeping the tabs 5px withing eachother... could you let me
know if this possible and maybe how to make it happen?

am trying to have a several tabs right next to each other
that have drop down panels that are wider than the tabs them
selves...
say a row of tabs 100px wide 125px high with 5px margin
between them that have dropdown panels with widths of 500px, all
while keeping the tabs 5px withing eachother... could you let me
know if this possible and maybe how to make it happen?

Similar Messages

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

    I just started using Spry and was wondering if there is an
    way to have a plus sign display next the the title when the panel
    is contracted but then when somebody clicks to open the content
    area it would change to a minus symbol?
    Thanks for your help in this matter.

    Thanks... This mostly worked. The problem is that those
    panel's which are preset to be open show the plus sign when the
    should show the minus. As you can see here
    http://www.ourbombers.com.
    The minus only shows when you actually click to open a panel.
    here is my css code.
    .CollapsiblePanel {
    margin-bottom: 2px;
    padding: 0px;
    border-left: solid 1px #CCC;
    border-right: solid 1px #999;
    border-top: solid 1px #999;
    border-bottom: solid 1px #CCC;
    /* This is the selector for the CollapsiblePanelTab. This
    container houses
    * the title for the panel. This is also the container that
    the user clicks
    * on to open or close the panel.
    * The name of the class ("CollapsiblePanelTab") used in this
    selector is not necessary
    * to make the widget function. You can use any class name
    you want to style an
    * CollapsiblePanel panel tab container.
    .CollapsiblePanelTab {
    font: bold 0.7em sans-serif;
    background-color: #DDD;
    border-bottom: solid 1px #CCC;
    margin: 0px;
    padding: 2px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    background-image: url(images/plus.gif);
    background-position: right;
    background-repeat: no-repeat;
    /* This is the selector for a CollapsiblePanel's Content
    area. It's important to note that
    * you should never put any padding on the content area
    element if you plan to
    * use the CollapsiblePanel's open/close animations. Placing
    a non-zero padding on the content
    * element can cause the CollapsiblePanel to abruptly grow in
    height while the panels animate.
    * The name of the class ("CollapsiblePanelContent") used in
    this selector is not necessary
    * to make the widget function. You can use any class name
    you want to style a
    * CollapsiblePanel content container.
    .CollapsiblePanelContent {
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    /* An anchor tag can be used inside of a CollapsiblePanelTab
    so that the
    * keyboard focus ring appears *inside* the tab instead of
    around the tab.
    * This is an example of how to make the text within the
    anchor tag look
    * like non-anchor (normal) text.
    .CollapsiblePanelTab a {
    color: black;
    text-decoration: none;
    /* This is an example of how to change the appearance of the
    panel tab that is
    * currently open. The class "CollapsiblePanelOpen" is
    programatically added and removed
    * from panels as the user clicks on the tabs within the
    CollapsiblePanel.
    .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-color: #EEE;
    background-image: url(images/minus.gif);
    background-position: right;
    background-repeat: no-repeat;
    /* This is an example of how to change the appearance of the
    panel tab as the
    * mouse hovers over it. The class "CollapsiblePanelTabHover"
    is programatically added
    * and removed from panel tab containers as the mouse enters
    and exits the tab container.
    .CollapsiblePanelTabHover, .CollapsiblePanelOpen
    .CollapsiblePanelTabHover {
    background-color: #CCC;
    /* This is an example of how to change the appearance of all
    the panel tabs when the
    * CollapsiblePanel has focus. The "CollapsiblePanelFocused"
    class is programatically added and removed
    * whenever the CollapsiblePanel gains or loses keyboard
    focus.
    .CollapsiblePanelFocused .CollapsiblePanelTab {
    background-color: #3399FF;

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

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

  • 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

Maybe you are looking for