Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
prasanth sfdcprasanth sfdc 

how to display extra buttons in toogle in visualforce page using my code.

Hi, 
   I want to display buttons like the below image. i worte the code basic code here . intially some buttons should be display in page and remaining buttons should be display in toogle. the button lable names and buttons are always dynamic. Please help me. 

  
public class AutoToogleButtons {

public list<Account> accs{set;get;}
  public AutoToogleButtons()
  {  
      accs =[select id,name from account limit 30];
  
  }

}








<apex:page controller="AutoToogleButtons">
  <apex:form >
  <apex:pageblock >
  <table ><tr>
     <apex:repeat value="{!accs}" var="acc">
     <td><apex:commandbutton value="{!acc.Name}" /> </td>
     
     </apex:repeat>
     </tr></table>
  </apex:pageblock>
  </apex:form>
  
  
</apex:page>

User-added image
Nagendra ChinchinadaNagendra Chinchinada
Hi Prashanth,

Better you go for Tabs in VF page. Refer below links for mor einfo about it.

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_tabPanel.htm

http://www.infallibletechie.com/2013/01/creating-tabs-in-visualforce-page-using.html

https://www.minddigital.com/how-to-create-tab-panel-in-salesforce/


Your code looks more or less similar to this. Place your content in respective tabs.​ 
<apex:page controller="AutoToogleButtons">
  <apex:form >
<apex:page standardController="Account" showHeader="true">
    <!-- Define Tab panel .css styles -->
    <style>
    .activeTab {background-color: #236FBD; color:white; background-image:none}
    .inactiveTab { background-color: lightgrey; color:black; background-image:none}
    </style>
            
    <!-- Create Tab panel -->
    <apex:tabPanel switchType="client" selectedTab="name2" id="AccountTabPanel"
        tabClass='activeTab' inactiveTabClass='inactiveTab'>
        <apex:tab label="Model 1" name="Model1" id="tabOne">
	 <apex:pageblock >
<table ><tr>
 <apex:repeat value="{!accs}" var="acc">
 <td><apex:commandbutton value="{!acc.Name}" /> </td>
 
 </apex:repeat>
 </tr></table>
</apex:pageblock>
		</apex:tab>
		
        <apex:tab label="Model 2" name="Model2" id="tabTwo">
		content for tab two
		</apex:tab>
		
		<apex:tab label="Model 3" name="Model3" id="tabThree">
		content for tab two
		</apex:tab>
		
		<apex:tab label="Model 4" name="Model4" id="tabFour">
		content for tab two
		</apex:tab>
		
    </apex:tabPanel>
	 </apex:form>
</apex:page>