how to Close p:accordionPanel on button click

Question

I am using to enter address field .by default am setting active-index="-1" so the panel will be closed when the page gets loaded.After the details has been entered by user i want the panel area which means i want the accordion panel to be closed on button(save) click.but i tried a lot using java script but am not able to achieve ,and here is page

<h:body>
    <ui:composition template="/WEB-INF/templates/layout.xhtml">
        <ui:define name="content">
        <h:form id="quotesForm">
                <div class="headerbg">
                    <div id="innerheaderbg">
                        <div id="iconarea">
                            <img src="#{request.contextPath}/images/headerimages/productlist.png" />
                        </div>
                        <div id="headertextarea">
                            <p class="headingtext">New Quote</p>
                            <p id="breadCrumbtext">Order &#160;<img src="#{request.contextPath}/images/error-bullet.gif" />
                                &#160;Quote List &#160;<img src="#{request.contextPath}/images/error-bullet.gif" />
                                &#160;New Quote
                            </p>
                        </div>

                    </div>
                </div>
            <p:growl id="msgs" />


             <div class="widget widget-table action-table">
                <div class="widget-header" style="text-align:center;padding-top: 52px">
                    <h3>Create New Quote</h3>
                </div>  

                <div class="widget-content" style="background-color: #DAEDF4;height: 600px;"  >
                    <div id="calender" style="margin-left: 52px;margin-top: -26px">
                        <table>
                            <tr>
                            <td>
                            <p:outputLabel id="qDate" value="#{quotesBean.qtCreationDate}"></p:outputLabel>
                            </td>
                            <td>
                            <p:calendar id="popup" showOn="button" display="inline" >
                                <p:ajax event="dateSelect" listener="#{quotesBean.onDateSelect}" update="qDate" />
                            </p:calendar>
                            </td>
                            </tr>
                        </table>
                        <p:outputLabel value="Invoice # #{quotesBean.qCount}" style="margin-top:-15px;margin-left:10px;"/>
                    </div>

                <div id="company">
                    <table align="right" style="margin-right: 52px">
                        <thead>
                            <tr>
                            <th style="text-align: center;padding: 0;"><img src="#{request.contextPath}/images/favicon.ico"/><p:spacer width="5px"/>SolvEdge</th>
                            </tr>                   
                        </thead>
                        <tr><td style="text-align: center;padding: 0;">Zameen Pallavaram,</td></tr>
                        <tr><td style="text-align: center;padding: 0;">Chennai,</td></tr>
                        <tr><td style="text-align: center;padding: 0;">INDIA</td></tr>
                    </table>
                </div>
                <h:form id="addForm">
                 <p:accordionPanel id="accordion" cache="false" activeIndex="-1" style="margin-bottom:20px;width:330px;" widgetVar="acc" >
                    <p:tab title="Bill To Address:" titleStyle="width:330px;background-color:#DAEDF4"  >
                        <h:panelGrid columns="2">
                            <h:outputLabel value="Name" />  
                            <h:inputText value="#{quotesBean.name}"/>

                            <h:outputLabel value="Street" />  
                            <h:inputText value="#{quotesBean.street}"/>  

                            <h:outputLabel value="City" />  
                            <h:inputText value="#{quotesBean.city}"/>  

                            <h:outputLabel value="ZIP" />  
                            <h:inputText value="#{quotesBean.zip}"/>  
                        </h:panelGrid>
                        <p:commandButton icon="ui-icon-save" value="Save" action="#{quotesBean.saveAddress}" update=":quotesForm:addForm:accordion" ajax="false" onclick="PF('quotesForm:addForm:accordion').hide();"/>
                    </p:tab>
                </p:accordionPanel>
                </h:form>
                </div>  
            </div>
            <script type="text/javascript">
            var link = document.getElementById('quotesForm:popup_input');
            link.style.display = 'none'; 

            function closeAccordianPanel()
            {
                var panel = document.getElementById('quotesForm:addForm:accordion');
                link.style.activeIndex = '-1'; 
                /* PF('widget_accordion').unselect(0); */
            }

            </script>
            </h:form>
            <br></br>
        </ui:define>
    </ui:composition>
</h:body>
</html>

Note:Java Script i tried here is nothing worked for me,i would like to close the accordion panel on button click.

Answer 1

Here is the panel:

<p:panel id="toggleable" header="Toggleable" toggleable="true" 
                toggleOrientation="horizontal" toggleSpeed="500" closeSpeed="500" 
                widgetVar="panel" class="left-menu-panel" >
</p:panel>

and button or commandLink which collapse panel

<p:commandLink styleClass="open-left-menu-button" 
                onclick="PF('panel').toggle()">
</p:commandLink>

You can set it with toggleOrientation="horizontal/vertical".

normal panel - not collapsed:

collapsed:

Answer 2

Unselect(index of tab) method only hide the p:tab.

If you want to hide your accordionPanel, you can use rendered attribute.

Answer 3

I bet you have javascript errors in the console...(PF('quotesForm:addForm:accordion').hide(); is wrong, it should be PF('acc').hide(); IF it works at all (nothing about that in the PrimeFaces docs). And why close a ui component via javascript if you do an 'ajax="false"'. And sending a click event to the tab you want to toggle works, but even better is to use the official client-side api: PF('acc').unselect(...);

Ahhhh... you have additional code below the commandbutton... but there is a wrong widgetVar value... and it is commented out... and the other part does nothing...