I am having a pageblock in which pageblock sectionitems of 2 commandlinks. I want to toggle between the these two links without getting the page refreshed.

VF Page:


<div style="width:35%;" id="maindiv">
              <apex:pageblocksection >
                <apex:pageblockSectionItem >
                  <apex:outputlabel value="Account Filters"/>
               <apex:pageblockSectionItem >
                  <apex:commandLink value="Show Filter" id="showFilter"/>
               <apex:pageblockSectionItem >
                  <apex:commandLink value="Hide Filter" id="hideFilter" style="display:none;"/>

The thing you're getting wrong is you cannot use literal id attributes from Visualforce tags. They get prefixed, as described in Best Practices for Accessing Component IDs and other resources. You can use the "ends with" selector instead, if you prefer.

Failing Selector


Working Selector


Even better, however, is to use a class selector instead:

<apex:commandLink styleClass="showFilter" ... />

// ...
var $showLink = $(".showFilter");

Beyond that, this question is just basic Javascript functionality no different than you would find on any other website.

| improve this answer | |
  • 1
    Using a class selector would be another viable alternative. I prefer that because it's a bit more legible (imho). – sfdcfox Apr 20 '17 at 19:58
  • I do too, was going to add that but got distracted. – Adrian Larson Apr 20 '17 at 19:58
  • 1
    Just for completeness, you can use $Component if you add ids to the whole element stack, but have to use document.querySelector because Salesforce uses : in their ids, which get misinterpreted as jQuery selectors if they aren't escaped: $(document.querySelector('#{!$Component.pageBlockID...showFilter}')) – IllusiveBrian Apr 20 '17 at 20:28

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.