How to create collapse and expand functionality between pageblocks in visual force

I am tryin to create expand and collapse functionality between pageblocks.The scenario is when i click the collapse button in one pageblock ,it should render another pageblock.How this can be achieved ? I tried using java script but the pageblock is not displaying properly.
My current code is

 <apex:page >
  <apex:includeScript value="{!$Resource.jqueryCollapse}"/>
  <apex:includeScript value="{!$Resource.jqueryCollapse1}"/>
   <apex:includeScript value="{!$Resource.jqueryCollapse2}"/>
   <apex:form >
   <html>
   <head>

   <script type="text/javascript">

    $(function(){

   $(".header").click(function () {    
   alert("Loopafe");
   $header = $(this);   

   $content = j$header.next();    
    $content.slideToggle(100, function () {       
         $header.text(function () {           
         return $content.is(":visible") ? $(this).attr("src",      "https://c.ap1.visual.force.com/resource/1404298250000/Minus") : $(this).attr("src", "https://c.ap1.visual.force.com/resource/1404298250000/plusimg");
    }); 
});    
}); 
}); 
</script>
 <style> 
  .container .content {
  display: none;
 padding : 5px;
 }
 </style>
</head>
<apex:pageBlock >
<apex:pageBlockSection columns="10" collapsible="True" >           
<div class="container">
    <img   src="XXg"class ="   header " />
          <div class="content">
         <apex:pageBlock >
           <apex:pageBlockSection columns="5"  >
        <apex:outputLabel value="Collapse"  id="theSecond1"/>
        <apex:inputText /> 
       </apex:pageBlockSection>               
     </apex:pageBlock>

  </div>
   </div>
        <apex:outputText value="First" id="theFirst"/>
        <apex:InputText />

    </apex:pageBlockSection>    
</apex:pageBlock>
<body>
 </body>
 </html>

  </apex:form>
  </apex:page>

Answer

I assume you are trying to build a so called accordion. As @crmprogdev mentioned I would also recommend to use jquery for this task and not reinvent the weel. You should avoid to go with pure javascript. Have a look a this:

http://jqueryui.com/accordion/

or as an alternative

http://plugins.jquery.com/collapsible/

you will need to adapt both to work pageblocks, but eventually it will work. Using jquery without plugin is third an option. Look at click(), show(), hide() and toggle().

Attribution
Source : Link , Question Author : Manoj Chandran , Answer Author : Uwe Heim

Leave a Comment