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();" />

Similar Messages

  • 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

  • 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

  • How to put a few pages together as a panel group in the same screen ?

    Dear Friends,
    Hello. I am developing the accounting application of Journal Entry module. I have developed 5 pages for a journal entry: Journal header, Journal Line, Journal total, Journal Error and Journal Approval. I want to put 5 pages together as a panel group in the same screen so that users are convenient to use them. The format is as follows:
    Header | Lines | Total | Error | Approval
    When a user click on Header or Lines or Total or Error or Approval, its related page is displayed below it on the screen. But I don't understand how to put "Header", "Lines", "Total", "Error" and "Approval" together as above format and link them to its related page. Can anybody tell me how to do that ? Thanks.
    Lucy

    Mike,
    It's correct to make 5 pages as a seperate component.
    I am developing an accounting system using PeopleTools by myself.
    Because you understand PeopleSoft financial application, please tell me the 2 questions as follows:
    First, In Journal Line page, when select "edit Journal" and click button "process", the system check the Journal against Budget, if it's Ok, the System assign Journal ID for the Journal and put "valid" into the field of "Budget Status" and "Journal Status" in Total page. If it's not OK, the system send error message into Error page. Do you know how developer do that ?
    Second, In Journal Line Page, when select "Submit Journal" and click button "process", the system send the Journal to Approval page for approval. Do you know how developer do that ?
    Lucy

  • Render Panel Group

    Hi,
    what is the easiest way to render a panel group by clicking a certain button. Both elements are arranged on the same page.
    I've tried it with a managed bean, which contains a variable that could be either true or false. By clicking the button the variable is set to true and the panel is rendered.
    The problem is, that if you click a any button on the page after the panel is rendered, the variable is automatically set to false and the panel will vanished.
    Thanks in advance.

    Hi,
    its because the managed bean is in request scope and the default setting is false. Set it to a larger scope e.g. pageFlow or session and this will not happen
    Frank

  • 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

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

  • Partial Trigger is not working with Panel Group Layout using ADF 11g.

    Friends,
    I have a requirment , Based on the <af:selectBooleanCheckbox> value I have to render <af:panelGroupLayout> dynamically. If the check box is checked then I have to display panel group layout otherwise not. The problem what I am facing here is Partial Trigger is not working, If I Un check the boolean box and refresh the page then I see it is working. If I don't refresh the page I am not seeing this is working as expected.
    Below is the snippet
    <af:selectBooleanCheckbox value="#{bindings.ChkBoolean.inputValue}"
    shortDesc="#{bindings.OtherOptChk.hints.tooltip}"
    id="OtherOpt" immediate="true" autoSubmit="true"
    />
    <af:panelGroupLayout id="pgl11" partialTriggers="ChkBoolean"
    rendered="#{bindings.ChkBoolean.inputValue}"">
    Am I doing anything wrong here
    Thanks in Advance

    Hi,
    I started to document common pitfalls like this. The problem has been reported last month too and is documented in here: http://www.oracle.com/technetwork/developer-tools/adf/learnmore/oct2010-otn-harvest-183714.pdf
    Frank

  • I can't get formMail.php to recognize my simple Spry Radio Group button

    I don't know php at all, but I have a dreamweaver form that sends its information to a document called "formmail.php" and that sends the email to me.
    I was able to add text fields by duplicating the text field code in the formmail.php file and it does work, BUT i don't know what code should be on the file to process the radio button information. The radio button group is made up of 2 buttons "Yes" and "No"
    This is a abbreviated version of "formmail.php"
    <body>
    <?php
      $name=addslashes($_POST['name']);
      $address=addslashes($_POST['address']);
      $email=addslashes($_POST['email']);
      $radioGroup1=addslashes($_POST['arrangements']);
      $comments=addslashes($_POST['message']);
    // you can specify which email you want your contact form to be emailed to here
      $toemail = "[email protected]";
      $subject = "From the VFS website";
      $headers = "MIME-Version: 1.0\n"
                ."From: \"".$name."\" <".$email.">\n"
                ."Content-type: text/html; charset=iso-8859-1\n";
      $body = "Name: ".$name."<br>\n"
                ."Address: ".$address."<br>\n"
    ."Email: ".$email."<br>\n"
    ."Have you made pre-arrangements?: ".$radioGroup1."<br>\n"
                ."Comments:<br>\n"
                .$comments;
      if (!ereg("^[a-zA-Z0-9_]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$", $email))
        echo "That is not a valid email address.  Please return to the"
               ." previous page and try again.";
        exit;
        mail($toemail, $subject, $body, $headers);
        echo "Thanks for submitting your comments";
    ?>
    </body>
    </html>
    And this is what the code for my Spry Radio Group button is looking like.
    <p id="arrangements"><span id="spryradio1">
                                          <label>
                                            <input type="radio" name="RadioGroup1" value="Yes" id="RadioGroup1_0">
                                            Yes  </label>
                                          <label>
                                            <input type="radio" name="RadioGroup1" value="No" id="RadioGroup1_1">
                                            No</label>
                                            <br>
                                          <br>
    </span></p>
    Please help - I'm lost!

    The post form method gets a variable, by name and sends that value to your processor.  You have called $_POST['attachments'] which is the name of the container <p> tag and not of the radio group.  So change:
    $radioGroup1=addslashes($_POST['arrangements']);
    to
    $radioGroup1=addslashes($_POST['RadioGroup1']);
    That changes the <p> arrangements to the RadioGroup1 which is the name you gave the radio group.

  • How do I add a spry Collapsible Panel Group?

    How do you add a spry Collapsible Panel Group? When I go to
    the Insert -> Spry there is only a Spry Collapsible Panel
    option, not group. Do I have to download an update? Is there
    something wrong with my install?
    I appreciate any help.

    Could someone at least tell me if they are able to add a Spry
    Collapsible Panel Group from the Insert -> Spry menu?

  • Can't get tab group button showing up

    Hi,
    My tabs are organized in groups of topics.
    Usually, I have a "tab group" button that appears on the tab bar, to open the "panorama" and switch between groups.
    I recently noticed that if I have more than one tab row, this button does not show up.
    I tried the View > Toobars > Customize menu, but strangely enough, when this contextual window opens, the tab group button suddenly reappears on the tab bar of the main window, and of course is not listed in the customize menu.
    As soon as I leave the menu, the button disappears from my tab bar :-(
    If I switch (CTRL+Shift+E) to the panorama and select a group with a few tabs (so that they fit on one line in the tab bar), then my tab group button is visible again.
    I suppose I can leave with the keyboard shortcut, but nevertheless I'd like to restore that button right.
    Any help appreciated!
    Thx.

    You can check for problems caused by a corrupted localstore.rdf file.
    *http://kb.mozillazine.org/Corrupt_localstore.rdf

  • Tab Item change for two panel group with 4 tabs each

    Hi
    All
    Will tab work for dynamic data loading in a panel group ?
    scenario .
    Panel group got 4 tabs . each tab contains grid view jsf component. these grid view will populate data once the Index page loads . each tab;s grid view will get data dynamically from backing bean with value objects .
    i am getting data for first tab . which is selected as true . but cannot change focus to other tabs. the functionality of tabchange event listener is not working. i checked the data for other tabs grid view. its coming correctly but cann;t see it in jsf page.
    tabs won;t work . is there any reason which stops working of tab , when we pass data dynamically to all grid views in 4 different tabs at a time.
    thanks in advance.
    Rambhapuri

    Data loading is happening , but cann;t change the tab , because tab item listener is not firing . when user clicks on other tab.
    regards
    rambhapuri

  • I dragged my tabs into the "Tab Group" button and now cant find those tabs but they are there in Firefox Home.

    I probably did this wrong since i just started using Firefox, but i dragged a tab into the Tab Groups button on my tool bar and lost all of the tabs when viewing on my laptop. When viewing on my smartphone can still view them in Firefox Home, please help.

    The app tabs feature is still in a relatively early stage of development. The option to remember app tabs independently of sessions has not yet been implemented, but it will be part of the release version of Firefox 4.

  • Hide/Show a Panel group or Panel Box with a command link

    I need to show and hide a panel group/box that has a lot of components inside ..with a command link ...I need to do this with partial submit ....please advise.
    <af:commandLink >
    hide the panel box with all the comps inside it ..change commandlink text ....
    use the same command link to show the panel box and change the command link
    text back
    </af:commandLink>
    <af:panelGroup layout="vertical">
    <af:panelBox>
         <af:panelGroup>
    ALOT of components .......
         </af:panelGroup>
    </af:panelBox>
    </af:panelGroup>
    I tried with partial trigger ..I tried everything i know ..it did not work .....it only worked I do a I full submit and setting some processScope(session) variables ..
    Thanks.

    Hi,
    - have a managed bean in session scope
    - define a boolean variable that is set to true
    - expose the variable through a public method
    - use EL on the panelBox rendered property to link to this boolean method
    - define an action listener on the command link and set the autosubmit property to true
    - use the action listener to set the boolean value
    - define a value for the ID property of the command link
    - set the ID vaule to the PartialTrigger property of the panelGroup component
    Frank

Maybe you are looking for