how to Close p:accordionPanel on button click - jsf

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  <img src="#{request.contextPath}/images/error-bullet.gif" />
 Quote List  <img src="#{request.contextPath}/images/error-bullet.gif" />
 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

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

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

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>enter code here`
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