5

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>
Improve this question
3
  • Try visiting the jQuery site. I know this is a feature supported by their libraries. Quite honestly, I find it to be very annoying, but its your page.
    – crmprogdev
    Jul 5, 2014 at 13:07
  • I just happened to notice that you have different code in your 1st pageblock than in your 2nd. Only the 1st one calls the functions at the bottom of the page. Closethis() requires var opid to be present in the pageblock which you don't have in the 1st one. Your code isn't at all consistent to give what you have a chance to even work.
    – crmprogdev
    Jul 5, 2014 at 14:28
  • I have updated my code please chk it
    – Manoj Chandran
    Jul 6, 2014 at 19:45

3 Answers 3

Reset to default
9

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

Improve this answer
0

There is small script which I used in my project to collapse the pageblock setion by default

https://jonyforce.wordpress.com/

Improve this answer
1
  • Yes, i have found a Jscript that will collapse a section by default so that if I move the 3 fields to the new section and collapse it by default then the user won't see them and won't edit them unless they actually start playing around with the screen in which case they may find them. Its a work around as best, there should be a way to just not have those fields on the screen at all and have the lookup filter still work.
    – George Piumatti
    Apr 21, 2016 at 9:34
0

Yes, i have found a Jscript that will collapse a section by default so that if I move the 3 fields to the new section and collapse it by default then the user won't see them and won't edit them unless they actually start playing around with the screen in which case they may find them. Its a work around as best, there should be a way to just not have those fields on the screen at all and have the lookup filter still work.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.