title: panel is not working inside the div - Primefaces
body: <p>I am implementing the vertical toggle panel but it is not getting toggled after the click on + icon, I have pasted entire code. 
  Code: Below is entire code:
  <br>
  find this comment in the Technical Sheet section</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"&gt;
  
  &lt;h:head&gt;
      &lt;title&gt;Projects Details&lt;/title&gt;
      &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;h:outputScript library="js" name="ppcr.js"&gt;&lt;/h:outputScript&gt;
      &lt;h:outputStylesheet library="css" name="ppcr.css"/&gt;
      &lt;h:outputStylesheet library="css" name="styles.css"/&gt;
      &lt;script type="text/javascript" language="JavaScript"&gt;
          $(document).ready(function() {
              $('.subMenu').smint({
                  'scrollSpeed' : 1000
              });
          });
  
      &lt;/script&gt;
  &lt;/h:head&gt;
  &lt;h:body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);"&gt;
  
      &lt;div class="header"&gt;
          &lt;h:graphicImage style="vertical-align: middle" value="resources/images/logoMainShort.gif" /&gt;
          &lt;b style="vertical-align: top;"&gt; Quotation Tool&lt;/b&gt;
      &lt;/div&gt;
  
      &lt;div style="line-height: 25px;margin: 0px 6px 0px 6px;"&gt;
          &lt;h:form&gt;     
              &lt;div class="navigation"&gt;
                  &lt;h:outputLink value="projects.xhtml"&gt;
                      &lt;h:outputText value="PROJECTS" style="color: #ffffff; text-decoration: none;"&gt;&lt;/h:outputText&gt;
                  &lt;/h:outputLink&gt;
                  &lt;h:outputLink value="masterData.xhtml"&gt;
                      &lt;b style="padding-left: 20px;"&gt;
                          &lt;h:outputText 
                              value="MASTER DATA"
                              style="color: #ffffff; text-decoration: none;"&gt;
                          &lt;/h:outputText&gt;
                      &lt;/b&gt;
                  &lt;/h:outputLink&gt;
              &lt;/div&gt;      
          &lt;/h:form&gt;
      &lt;/div&gt;
  
      &lt;div class= "background"&gt;
          &lt;div class="test" style="padding-top: 10px"&gt;Ford_V408_2015_PPCR01&lt;/div&gt;
          &lt;!-- &lt;div class="wrap"&gt; --&gt;
          &lt;div class="subMenu" style="margin-left: 1px"&gt;
              &lt;a href="#" style="width: 88%;" id="s1" class="subNavBtn"&gt;List To Quote&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="subMenu" style="margin-left: 22%"&gt;
              &lt;a href="#" style="width: 88%;" id="s2" class="subNavBtn"&gt;AVO&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="subMenu" style="margin-left: 43.8%"&gt;
              &lt;a href="#" style="width: 88%;" id="s3" class="subNavBtn"&gt;Technical Sheet&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="subMenu" style="margin-left: 65%"&gt;
              &lt;a href="#" style="width: 88%;" id="s3" class="subNavBtn"&gt;Geometry&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;h:form id="testForm"&gt;  
              &lt;div class="innersection"&gt;
                  &lt;div class="section s5"&gt;
                      &lt;div class="heading"&gt; 
                          &lt;h:outputText value="Project information" /&gt; 
                      &lt;/div&gt;
  
                      &lt;p:panelGrid 
                          style="margin:5px 0px 15px 0px; 
                          width:100%"
                          styleClass="panelgrid"&gt;
  
                          &lt;p:row&gt;
                              &lt;p:column colspan="8" /&gt;
                          &lt;/p:row&gt;
  
                          &lt;p:row&gt;
                              &lt;p:column style="border:white" styleClass="columnA"&gt;Brand Group&lt;/p:column&gt;
                              &lt;p:column styleClass="columnB"&gt;
                                  &lt;h:outputText value="Ford" /&gt;
                              &lt;/p:column&gt;
                              &lt;p:column styleClass="columnA"&gt;Model (Car Name) &lt;/p:column&gt;
                              &lt;p:column styleClass="columnB"&gt;
                                  &lt;h:outputText value="Ford Mondeo" /&gt;
                              &lt;/p:column&gt;
                              &lt;p:column styleClass="columnA"&gt;Annual Model Volume &lt;/p:column&gt;
                              &lt;p:column styleClass="columnB"&gt;
                                  &lt;h:outputText value="25 000" /&gt;
                              &lt;/p:column&gt;
                              &lt;p:column styleClass="columnA"&gt;Lifetime&lt;/p:column&gt;
                              &lt;p:column styleClass="columnB"&gt;
                                  &lt;h:outputText value="3 years" /&gt;
                              &lt;/p:column&gt;
                          &lt;/p:row&gt;
                          &lt;p:row&gt;
                              &lt;p:column styleClass="columnA"&gt;Brand&lt;/p:column&gt;
                              &lt;p:column styleClass="columnB"&gt;
                                  &lt;h:outputText value="Ford" /&gt;
                              &lt;/p:column&gt;
                              &lt;p:column styleClass="columnA"&gt;Project Code&lt;/p:column&gt;
                              &lt;p:column&gt;
                                  &lt;h:commandLink value="FORD_V408_2015" action="/projectDetails.xhtml" target="_blank"
                                     style="cursor:pointer;font-style: normal; font-family: Arial;color:#0000ff;font-size:13px;text-decoration: underline;"/&gt;
                              &lt;/p:column&gt;
                              &lt;p:column styleClass="columnA"&gt;Reason to quote&lt;/p:column&gt;
                              &lt;p:column styleClass="columnB"&gt;
                                  &lt;h:outputText value="New Car" /&gt;
                              &lt;/p:column&gt;
                              &lt;p:column styleClass="columnA"&gt;Peak Volume&lt;/p:column&gt;
                              &lt;p:column styleClass="columnB"&gt;
                                  &lt;h:outputText value="25 000" /&gt;
                              &lt;/p:column&gt;
                          &lt;/p:row&gt;
  
                          &lt;p:row&gt;
                              &lt;p:column colspan="8" /&gt;
                          &lt;/p:row&gt;
  
                      &lt;/p:panelGrid&gt;
  
                      &lt;div class="heading"&gt; 
                          &lt;h:outputText value="PPCR general information" /&gt; 
                      &lt;/div&gt;
  
                      &lt;p:panelGrid
                          id="addText"  
                          style="margin:5px 0px 15px 0px; width:100%"
                          styleClass="panelgrid"&gt;
  
                          &lt;p:row&gt;
                              &lt;p:column colspan="8" /&gt;
                          &lt;/p:row&gt;
  
                          &lt;p:row&gt;
                              &lt;p:column styleClass="columnA"&gt;Part Type&lt;/p:column&gt;
                              &lt;p:column styleClass="columnB"&gt;
                                  &lt;h:outputText value="WS" /&gt;
                              &lt;/p:column&gt;
                              &lt;p:column styleClass="columnA"&gt;PPCR Date&lt;/p:column&gt;
                              &lt;p:column styleClass="columnB"&gt;
                                  &lt;h:outputText value="25/10/2013" /&gt;
                              &lt;/p:column&gt;
                              &lt;p:column styleClass="columnA"  style="width:14%;"&gt;Development Step&lt;/p:column&gt;
                              &lt;p:column styleClass="columnB"&gt;
                                  &lt;h:selectOneMenu  value="#{ppcrGeneral.selectedStepsValue}" style="width:280px;" &gt;
                                      &lt;f:selectItems value="#{ppcrGeneral.stepsValue}" /&gt;
                                  &lt;/h:selectOneMenu&gt;
                              &lt;/p:column&gt;     
                          &lt;/p:row&gt;    
  
                          &lt;p:row&gt;
                              &lt;p:column styleClass="columnA"&gt;Family&lt;/p:column&gt;
                              &lt;p:column styleClass="columnB"&gt;
                                  &lt;h:outputText value="Laminated  " /&gt;
                              &lt;/p:column&gt;
                              &lt;p:column styleClass="columnA"&gt;Reply Date&lt;/p:column&gt;
                              &lt;p:column styleClass="columnB"&gt;
                                  &lt;h:inputText value="04/11/2013" /&gt;
                              &lt;/p:column&gt;
                              &lt;p:column styleClass="columnA"&gt;Reason for&lt;br/&gt; update&lt;/p:column&gt;
                              &lt;p:column rowspan="3" styleClass="columnB"&gt;
                                  &lt;p:inputTextarea rows="6" cols="42" autoResize="false" /&gt;
                              &lt;/p:column&gt;                             
                          &lt;/p:row&gt;
  
                          &lt;p:row&gt;
                              &lt;p:column styleClass="columnA"&gt;Market&lt;/p:column&gt;
                              &lt;p:column styleClass="columnB"&gt;
                              &lt;h:selectOneMenu  value="#{ppcrGeneral.selectedMarketValue}" style="width:140px;" &gt;
                                  &lt;f:selectItems value="#{ppcrGeneral.marketValue}" /&gt;
                              &lt;/h:selectOneMenu&gt;
                              &lt;/p:column&gt;
                              &lt;p:column styleClass="columnA" style="width:14%;"&gt;Reference PPCR&lt;/p:column&gt;
                              &lt;p:column styleClass="columnB"&gt;
                                  &lt;h:inputText size="16"/&gt;
                              &lt;/p:column&gt; 
                              &lt;p:column/&gt;     
                          &lt;/p:row&gt;
  
                          &lt;p:row&gt;
                              &lt;p:column 
                                  style="font-style: normal; font-family:Arial;font-size: 13px; font-weight: bold;width:15%;color: #333333;
                                      text-align: right;"&gt;
                                      Document Hyperlink
                              &lt;/p:column&gt;
                              &lt;p:column colspan="3"&gt;
                                  &lt;h:inputText size="51"/&gt;
                                  &lt;p:commandLink&gt;
                                      &lt;p:graphicImage 
                                          style="vertical-align: middle; margin-left: 5px;position: middle;border: none; WIDTH:15px; HEIGHT:15px;" 
                                          value="resources/images/attach.png"/&gt;
                                  &lt;/p:commandLink&gt;
                              &lt;/p:column&gt; 
                              &lt;p:column/&gt;
                          &lt;/p:row&gt;
  
                          &lt;p:row&gt;
                              &lt;p:column colspan="4"/&gt;
                              &lt;p:column styleClass="columnA" style="vertical-align:top;"&gt;Industrialization Manager&lt;/p:column&gt;           
                              &lt;p:column  styleClass="columnB" style="width:15%" &gt;
                              &lt;ui:repeat var="input" value="#{bean.inputTexts}"&gt;
                                   &lt;p:inputText size="18" value="#{inputTexts}" style="margin-bottom:2px;"/&gt;
                              &lt;/ui:repeat&gt;
  
                               &lt;b style="padding:0px 0px 0px 18px"&gt;
                                   &lt;p:commandButton 
                                       value="Add Manager"
                                       actionListener="#{bean.addInput}"
                                       update="addText"  
                                        style=" margin-bottom:10px;width:auto;height:28px;font-style: normal; font-family:Arial;font-size: 13px;
                                              color: #000000;text-align:center;font-weight: normal;text-decoration:none;cursor: pointer "/&gt;
                              &lt;/b&gt; 
                              &lt;/p:column&gt; 
                          &lt;/p:row&gt;
  
                          &lt;p:row&gt;
                              &lt;p:column colspan="8" /&gt;
                          &lt;/p:row&gt;
  
                      &lt;/p:panelGrid&gt;
  
                      &lt;div class="heading"&gt; 
                          &lt;h:outputText value="Packaging" /&gt; 
                      &lt;/div&gt;
  
                      &lt;p:panelGrid 
                            styleClass="panelgrid"
                            style="margin:5px 0px 15px 0px; width:100%;" &gt;
  
                          &lt;p:row&gt;
                              &lt;p:column colspan="8" /&gt;
                          &lt;/p:row&gt;
  
                          &lt;p:row&gt;
                              &lt;p:column styleClass="columnC" style="width:25%"&gt;Customer Packaging
                                  &lt;p:selectBooleanCheckbox style="position:absolute; margin-left:10px;"&gt;&lt;/p:selectBooleanCheckbox&gt;
                              &lt;/p:column&gt;
                              &lt;p:column styleClass="columnC" style="width:25%"&gt;AGC Container
                                  &lt;p:selectBooleanCheckbox style="position:absolute; margin-left:10px;"&gt;&lt;/p:selectBooleanCheckbox&gt;
                              &lt;/p:column&gt;
                              &lt;p:column styleClass="columnC" style="width:25%"&gt;OEM
                                  &lt;p:selectBooleanCheckbox style="position:absolute; margin-left:10px;"&gt;&lt;/p:selectBooleanCheckbox&gt;
                              &lt;/p:column&gt;
                              &lt;p:column styleClass="columnC" style="width:25%; text-align:center;"&gt;ARG
                                  &lt;p:selectBooleanCheckbox style="position:absolute; margin-left:10px;"&gt;&lt;/p:selectBooleanCheckbox&gt;
                              &lt;/p:column&gt;
                          &lt;/p:row&gt;
  
                          &lt;p:row&gt;
                              &lt;p:column colspan="8" /&gt;
                          &lt;/p:row&gt;
  
                      &lt;/p:panelGrid&gt;
  
                      &lt;div class="heading"&gt; 
                          &lt;h:outputText value="Logistics" /&gt; 
                      &lt;/div&gt;
  
                      &lt;p:panelGrid 
                             id="logistics"
                             styleClass="panelgrid" 
                             style="margin:5px 0px 15px 0px; width:100%;" &gt;
  
                          &lt;p:row&gt;
                              &lt;p:column colspan="6" /&gt;
                          &lt;/p:row&gt;
  
                          &lt;p:row&gt;
                              &lt;p:column styleClass="columnA" style="width:15%;vertical-align:top;"&gt;Shipping location &lt;/p:column&gt;
                              &lt;p:column styleClass="columnB" &gt;
                               &lt;ui:repeat var="input" value="#{bean.inputLocation}"&gt;
                                  &lt;p:inputText  value="#{inputLocation}" style="margin-bottom:2px;"/&gt;
                               &lt;/ui:repeat&gt;   
                                  &lt;p:commandButton 
                                      value="Add Location"
                                      actionListener="#{bean.addLocation}"
                                      update="logistics" 
                                      style=" margin-bottom:10px;width:auto;height:28px;font-style: normal; font-family:Arial;
                                          font-size: 13px;color: #000000;text-align:center;font-weight: normal;text-decoration:none;cursor: pointer "/&gt;
                              &lt;/p:column&gt;
  
                              &lt;p:column styleClass="columnA" style="width:15%; vertical-align:top; "&gt;Incoterm &lt;/p:column&gt;
                              &lt;p:column styleClass="columnB"&gt;
                              &lt;ui:repeat var="input" value="#{bean.inputIncoterm}"&gt;  
                                   &lt;h:selectOneMenu value="#{ppcrGeneral.selectedIncotermValue}" style="width:140px;margin-bottom:6px" &gt;
                                      &lt;f:selectItems value="#{ppcrGeneral.incotermValue}" /&gt;
                                  &lt;/h:selectOneMenu&gt;
                              &lt;/ui:repeat&gt;    
  
                                  &lt;!-- &lt;b style="margin: 0px 30px 20px 0px;"&gt;  --&gt;
                                      &lt;p:commandButton 
                                          value="Add Incoterm"
                                          actionListener="#{bean.addIncoterm}"
                                          update="logistics" 
                                          style=" margin-bottom:10px;width:auto;height:28px;font-style: normal; font-family:Arial;font-size: 13px;
                                              color: #000000;text-align:center;font-weight: normal;text-decoration:none;cursor: pointer "/&gt;
                                  &lt;!-- &lt;/b&gt; --&gt;           
                              &lt;/p:column&gt;
                              &lt;p:column styleClass="columnA" style="width:15% ;vertical-align:top;" &gt;Just in sequence &lt;/p:column&gt;
                              &lt;p:column styleClass="columnB" style="width:20%;vertical-align:top;"&gt;
                                  &lt;h:selectOneMenu    value="#{ppcrGeneral.selectedSequenceValue}" style="width:100px;" &gt;
                                     &lt;f:selectItems value="#{ppcrGeneral.sequenceValue}" /&gt;
                                  &lt;/h:selectOneMenu&gt;
                                  &lt;h:outputText 
                                         value="per day" 
                                         style="margin-left:5px;font-style: normal; font-family:Arial; FONT-WEIGHT: bold;color:#999999;font-size: 13px;"/&gt;
                              &lt;/p:column&gt; 
                          &lt;/p:row&gt;
  
                          &lt;p:row&gt;
                              &lt;p:column colspan="8" /&gt;
                          &lt;/p:row&gt;
                      &lt;/p:panelGrid&gt;
                  &lt;/div&gt;
  
                  &lt;div class="section s1"&gt;
                      Removed code fron this section
                  &lt;/div&gt;
  
                  &lt;div class="section s2"&gt;
                      &lt;h1&gt;AVO&lt;/h1&gt;
                  &lt;/div&gt;
  
                  &lt;!-- PPCR: Technical Section --&gt;
  
                  &lt;div class="section s3"&gt;
                      &lt;div class="heading"&gt;
                          &lt;h:outputText value="Technical Sheet" /&gt;
                      &lt;/div&gt;
                      &lt;div class="border"&gt;
                          &lt;p:panelGrid style="margin:5px 0px 15px 0px; width:100%"    
                            styleClass="panelgrid"&gt; 
  
                             &lt;p:row&gt;
                                 &lt;p:column colspan="2"/&gt;
                             &lt;/p:row&gt;
                              &lt;p:row&gt;
                                  &lt;p:column  styleClass="columnB" style="width:30%"&gt;
                                     &lt;h:commandLink action="/pdfFileUpload.xhtml" target="options:height=200, width=300"&gt;
                                       &lt;p:graphicImage value="resources/images/upload.png" 
                                           style="vertical-align: middle; position: middle;border: none;"/&gt;
                                      &lt;/h:commandLink&gt;
                                  &lt;/p:column&gt;
                              &lt;!-- Panel is not working --&gt;   
                                  &lt;p:column rowspan="11" style="vertical-align:top"&gt;
                                      &lt;p:panel header="Size" toggleable="true" rendered="true"
                                          toggleOrientation="vertical"&gt;
                                          &lt;h:outputText value="Test" /&gt;
                                      &lt;/p:panel&gt;
                                  &lt;/p:column&gt;
                              &lt;!-- Panel is not working --&gt;   
                              &lt;/p:row&gt;
                              &lt;p:row&gt;
                                 &lt;p:column /&gt;
                              &lt;/p:row&gt;
                              &lt;p:row&gt;
                                 &lt;p:column /&gt;
                              &lt;/p:row&gt;
                              &lt;p:row&gt;
                                &lt;p:column&gt;
                                 &lt;h:outputText 
                                    value="Manufacuring Control Method"
                                    style="color:#164990;font-size:13px;font-family:Arial;font-style: normal;font-weight: bold;" /&gt;
                               &lt;/p:column&gt;
                               &lt;/p:row&gt;   
  
                               &lt;p:row&gt;  
                                 &lt;p:column &gt;
                                   &lt;h:outputText value="Check fixt. position" styleClass="columnD"/&gt;
                                   &lt;h:selectOneMenu  
                                         value="#{ppcrGeneral.selectedMarketValue}" 
                                         style="width:200px;font-style: normal;font-family: Arial;FONT-WEIGHT: 400;font-size: 13px;text-align: left;color: #333333;
                                                margin-left: 15px;" &gt;
                                     &lt;f:selectItems value="#{ppcrGeneral.marketValue}" /&gt;
                                    &lt;/h:selectOneMenu&gt;
                                  &lt;/p:column&gt; 
                              &lt;/p:row&gt;
  
                              &lt;p:row&gt;  
                                 &lt;p:column &gt;
                                   &lt;h:outputText value="Check fixt. concept" styleClass="columnD"/&gt;
                                   &lt;h:selectOneMenu  
                                        value="#{ppcrGeneral.selectedMarketValue}" 
                                        style="width:200px;font-style: normal;font-family: Arial;FONT-WEIGHT: 400;font-size: 13px;text-align: left;color: #333333;
                                                margin-left: 15px;" &gt;
                                     &lt;f:selectItems value="#{ppcrGeneral.marketValue}" /&gt;
                                    &lt;/h:selectOneMenu&gt;
                                  &lt;/p:column&gt; 
                              &lt;/p:row&gt;
  
                              &lt;p:row&gt;  
                                 &lt;p:column &gt;
                                   &lt;h:outputText value="Spacers" styleClass="columnD" style="margin-left:21%"/&gt;
                                   &lt;h:selectOneMenu  
                                      value="#{ppcrGeneral.selectedMarketValue}" 
                                       style="width:200px;font-style: normal;font-family: Arial;FONT-WEIGHT: 400;font-size: 13px;text-align: left;color: #333333;
                                                margin-left: 15px;" &gt;
                                     &lt;f:selectItems value="#{ppcrGeneral.marketValue}" /&gt;
                                    &lt;/h:selectOneMenu&gt;
                                  &lt;/p:column&gt; 
                              &lt;/p:row&gt;
  
                              &lt;p:row&gt;  
                                 &lt;p:column &gt;
                                   &lt;h:outputText value="Stoppers" styleClass="columnD" style="margin-left:20%"/&gt;
                                   &lt;h:selectOneMenu  
                                      value="#{ppcrGeneral.selectedMarketValue}" 
                                      style="width:200px;font-style: normal;font-family: Arial;FONT-WEIGHT: 400;font-size: 13px;text-align: left;color: #333333;
                                                margin-left: 15px;" &gt;
                                     &lt;f:selectItems value="#{ppcrGeneral.marketValue}" /&gt;
                                    &lt;/h:selectOneMenu&gt;
                                  &lt;/p:column&gt; 
                              &lt;/p:row&gt;
  
                              &lt;p:row&gt;
                                 &lt;p:column colspan="2"/&gt;
                             &lt;/p:row&gt;
                              &lt;p:row&gt;
                                 &lt;p:column colspan="2"/&gt;
                             &lt;/p:row&gt;
                          &lt;/p:panelGrid&gt;
                      &lt;/div&gt;
                  &lt;/div&gt; 
                        &lt;!-- PPCR: Technical Section Ends --&gt;
  
  
                  &lt;div class="section s4"&gt;
                      &lt;h1&gt;Geometry&lt;/h1&gt;
                      &lt;br class="clear"&gt;&lt;/br&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
  
  &lt;script type="text/javascript" language="javascript"&gt;
      var _gaq = _gaq || [];
      _gaq.push([ '_setAccount', 'UA-9804757-1' ]);
      _gaq.push([ '_trackPageview' ]);
    (function() {
       var ga = document.createElement('script');
          ga.type = 'text/javascript';
          ga.async = true;
          ga.src = ('https:' == document.location.protocol ? 'https://ssl'
      : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(ga, s);
      })();
  &lt;/script&gt;
  &lt;/h:form&gt;
  &lt;/div&gt;
  &lt;/h:body&gt;
  &lt;/html&gt;
  </code></pre>