function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Sylvie SerpletSylvie Serplet 

Changing styleClass of an apex:commandbutton when selected

Hi All,
I have a VF page styled with SLDS to use in Lightning. I have an apex command buttonin the page that is using a styleClass 'slds-button-neutral.' This button is used to hide or display some elements on the page. What I would like to do is changing its appearance to sld-button-brand when clicked and back to neutral when click again. Any idea how to achieve that? Could not find any solution on the web except using CSS but not SLDS.
Thanks in advance for your help.
Sylvie
 
Best Answer chosen by Sylvie Serplet
Sylvie SerpletSylvie Serplet
I found another solution not changing the appearance of the button but the text. It is even a better solution.
I have created a variable for the command button value and assigned it in the controller when the button is clicked, as shown below.
<apex:commandbutton value="{!buttonStatus}" action="{!toggleContent}" styleClass="slds-button slds-button--brand"></apex:commandbutton>

Controller
public PageReference toggleContent() {
        //If the showContent variable is true, set it to false, else, set it to true
  
        if(showContent){
            showContent = false;
            buttonStatus = 'Only Visible Policies';
        }
        else{
            showContent = true;
            buttonStatus = 'All Policies';
        }
        return null;
    }

 

All Answers

NagendraNagendra (Salesforce Developers) 
Hi Serpiet,

May I suggest you please check with below link from the stack exchange community which might help you accelerate further with above requirement. Please let us know if this helps.

Thanks,
Nagendra
Sylvie SerpletSylvie Serplet
Thank yo Nagendra,
I am already using SLDS.
This is my code:
<apex:page controller="NestedQueryPolicyExt" standardStylesheets="false" applyBodyTag="false">
    
    <apex:slds />
    <div class="slds-scope">        
           
        <apex:form >
            
            <div class="slds-text-heading_small slds-text-align_right">                  
                <apex:commandbutton value="Policies Visible Only" action="{!toggleContent}" styleClass="slds-button slds-button--neutral"></apex:commandbutton>          
            </div>    
    <div id="contentToToggle" style="display:{!if(showContent,"block","none")};">
           <apex:pageblock mode="maindetail"> 
                    <apex:pageblocktable value="{!PolicyAndTransactions}" var="po" 
.....
   </apex:pageblocktable>
</apex:pageblock>
</div>
 <div id="contentToToggle" style="display:{!if(showContent,"none","block")};">
           <apex:pageblock mode="maindetail"> 
                    <apex:pageblocktable value="{!PolicyVisible}" var="pv"
.......
 </apex:pageblocktable>
</apex:pageblock>
</div>

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

What I would like to achieve is when my button is clicked it changes to slds-button-neutral to slds-button-brand and vice versa to show which one of my table is displayed.
Any idea?
Thank you in advance for your help.
Sylvie 
Sylvie SerpletSylvie Serplet
I found another solution not changing the appearance of the button but the text. It is even a better solution.
I have created a variable for the command button value and assigned it in the controller when the button is clicked, as shown below.
<apex:commandbutton value="{!buttonStatus}" action="{!toggleContent}" styleClass="slds-button slds-button--brand"></apex:commandbutton>

Controller
public PageReference toggleContent() {
        //If the showContent variable is true, set it to false, else, set it to true
  
        if(showContent){
            showContent = false;
            buttonStatus = 'Only Visible Policies';
        }
        else{
            showContent = true;
            buttonStatus = 'All Policies';
        }
        return null;
    }

 
This was selected as the best answer