0
<apex:outputPanel id="filterBlock">

    <apex:pageBlock rendered="{!isLoadPage}">
    <div style="width:35%;" id="maindiv">
    <apex:pageblocksection >
    <apex:pageblockSectionItem >
    <apex:outputlabel value="Account Filters" style="font-weight:bold"/>
    </apex:pageblockSectionItem>


    <apex:pageblockSectionItem >

    <a href="#" onclick="toggleDiv()" id="showlink" style="display:none;" >HideFilter</a> 
    <a href="#" onclick="toggleDiv()" id="hidelink" >ShowFilter</a>&nbsp;&nbsp;


    </apex:pageblockSectionItem>

    </apex:pageblocksection> 
    </div>

        <apex:outputPanel id="showblock" style="display:none;">
           <apex:pageblockSection columns="3">
            <apex:repeat value="{!filterArray}" var="a">
              <apex:pageBlockSectionItem >
                <apex:outputLabel value="{!a.label}"/>
                  <apex:inputText value="{!a.SearchValue}" id="searchTextId"/>
              </apex:pageBlockSectionItem>  
              </apex:repeat> 
              <apex:pageblockSectionItem >
                 <a href="#" onClick="clearValue()" id="clearValue" style="display:none;"> Clear Filter </a>  

              </apex:pageblockSectionItem>
            </apex:pageblockSection>
        </apex:outputPanel>

        <apex:outputPanel id="hideblock" style="display:none;">

        </apex:outputPanel>
    </apex:pageBlock>

    </apex:outputPanel>
function toggleDiv() {
    $("[id$=showblock]").toggle();
    $("[id$=showlink]").toggle();
    $("[id$=hideblock]").toggle();
    $("[id$=hidelink]").toggle();
    $("[id$=clearValue]").toggle();

    }


    function clearValue() {
        $("[id$=searchTextId]").val('');       
    }

I am having a command button called Search which displays the output panel on clicking. On clicking the link Show Filter , it will display the inputtext field.( It is similar to the standard filter search doing in the salesforce). But once i enter the values in the filter field and doing the search , i want the showblock content to be displayed there. Instead the block is vanishing off and again it is making me to click on the show filter link to display the filter field block. Please any one help me out

  • You don't show us where "Show Filter" is in your DOM. All I see is "showlink", an outputPanel with an Id of "showblock", another toggle for "hidelink" (no match to anything, and an outputPanel with an id of "hideblock". You've either not shown us the relevant code or don't have your Id's matched correctly in your code. – crmprogdev Apr 27 '17 at 14:58
  • I have added the script function which is toggling the block using the hyperlink – ram135868 Apr 27 '17 at 15:11
  • 1
    Where is your search button code where you are performing search and rendering the panel? – Santanu Boral Apr 27 '17 at 15:44
  • Depending on your search button code, this is generally NOT the way to be doing a show/hide with VF. Using apex:commandLink and the action attribute you can use native Ajax capabilities without calling JS to toggle visibility with the onClick while also triggering the reRender. See the documentation at developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/…. – crmprogdev Apr 27 '17 at 20:59

Your Answer

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

Browse other questions tagged or ask your own question.