You need to sign in to do that
Don't have an account?
rishabh rathor 18
My requirement is to display Account and its related contacts using accordion Using VF page.
Here Its my Code:-
========Apex Controller=============
public class AccordianCntrl {
public String selectedaccountId { get; set; }
public List<Contact> Contacts{get;set;}
public AccordianCntrl(){
Contacts = new List<Contact>();
}
public List<Account> getListOfAccounts()
{
List<Account> AccountList = [select id,Name,Phone,AccountNumber,Industry from Account Limit 10] ;
return AccountList;
}
// Return Accounts
public pagereference contactNames()
{
system.debug('id '+selectedaccountId);
Contacts = [Select FirstName, LastName, Email , Phone From Contact where Accountid=:selectedaccountId];
//List<Contact> results1 = [Select FirstName, LastName, Email , Phone From Contact ];
System.debug(Contacts);
return null;
}
}
========VF Page===================
<apex:page controller="AccordianCntrl" docType="html-5.0" standardStylesheets="true" showHeader="false">
<apex:slds />
<style>
.slds-scope .slds-section { position: relative; margin: 0px;}
.slds-scope .slds-section:after { content: ""; width: 8px; height: 8px; border-bottom: 2px solid #000; border-left: 2px solid #000; position: absolute; transform: rotate(-135deg) skew(0deg); top: 13px; left: 12px; cursor: pointer;}
.slds-scope .slds-section.slds-is-open:after { content: ""; width: 8px; height: 8px; border-bottom: 2px solid #000; border-left: 2px solid #000; position: absolute; transform: rotate(-45deg) skew(0deg); top: 12px; right: 10px; cursor: pointer;}
.slds-scope .slds-section__title-action{ background: transparent; border-top: 1px solid #dddbda !important;}
.slds-scope .slds-section:first-child .slds-section__title-action{ border-top:0px !important;}
.slds-scope .slds-section.slds-is-open .slds-section__content{ padding:15px 30px;}
</style>
<!--jQuery CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Salesforce Lightning Design System Static Resource-->
<apex:stylesheet value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}" />
<script>
var j$ = jQuery.noConflict();
</script>
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<!--The Salesforce Lightning Design System Wrapping Div with Scoping Class -->
<div class="minerva18">
<fieldset class="slds-box slds-theme--default slds-container">
<!-- Single Section Wrapper With Three SLDS Sections, The Wrapper Div Class must be 'Minerva18SectionGroupSingle' -->
<div class="Minerva18SectionGroupSingle" >
<div class="slds-section">
<h3 class="slds-section__title">
<button class="slds-button slds-section__title-action">
<svg aria-hidden="true" class="slds-section__title-action-icon slds-button__icon slds-button__icon--left">
<use xlink:href="{!$Resource.SLDS}/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
</svg>Accounts</button>
</h3>
<div class="slds-section__content">
<apex:outputPanel id="table">
<table class="slds-table slds-table_cell-buffer slds-table_bordered" >
<thead>
<tr >
<th class="" scope="col">
<div class="slds-truncate" title="Name">Name</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Account Number">Account Number</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Phone">Phone</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Industry">Industry</div>
</th>
</tr>
</thead>
<tbody>
<apex:repeat value="{!ListOfAccounts}" var="con">
<tr class="slds-hint-parent">
<td data-label="Account Number" >
<div class="slds-truncate" title="Account Number"> <Apex:outputfield value="{!con.AccountNumber}"/></div>
</td>
<td data-label="Phone">
<div class="slds-truncate" title="Phone"> <apex:outputfield value="{!con.Phone}"/></div>
</td>
<td data-label="Industry">
<div class="slds-truncate" title="Industry"> <apex:outputfield value="{!con.Industry}"/></div>
</td>
</tr>
</apex:repeat>
</tbody>
</table>
<apex:actionSupport event="onchange" action="{!contactNames}" reRender="table"/>
</apex:outputPanel>
</div>
</div>
</div>
<!-- Single Section Wrapper End-->
</fieldset>
<fieldset class="slds-box slds-theme--default slds-container">
<div class="Minerva18SectionGroupSingle" >
<div class="slds-section">
<h3 class="slds-section__title">
<button class="slds-button slds-section__title-action">
<svg aria-hidden="true" class="slds-section__title-action-icon slds-button__icon slds-button__icon--left">
<use xlink:href="{!$Resource.SLDS}/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
</svg>
Related contacts
</button>
</h3>
<div class="slds-section__content">
<p>
Hello...
</p>
</div>
</div>
</div>
</fieldset>
</div>
<script>
/*SLDS Sections*/
j$('.slds-section__content').hide();
j$('.slds-section__title').find('button').find('svg').css('transition', '0.3s');
j$('.slds-section__title').click(function(){
if(j$(this).parent().parent().hasClass('Minerva18SectionGroupSingle')){
if(j$(this).parent().hasClass('slds-is-open')){
j$(this).parent().removeClass('slds-is-open');
j$(this).parent().find('.slds-section__content').hide();
}
else{
j$(this).parent().parent().find('.slds-section').removeClass('slds-is-open');
j$(this).parent().parent().find('.slds-section__content').hide();
j$(this).parent().toggleClass('slds-is-open');
j$(this).parent().find('.slds-section__content').show();
}
}
else{
j$(this).parent().toggleClass('slds-is-open');
if(j$(this).parent().hasClass('slds-is-open')){
j$(this).parent().find('.slds-section__content').show();
}else{
j$(this).parent().find('.slds-section__content').hide();
}
}
});
/*SLDS Sections*/
</script>
</html>
</apex:page>
Thanks & Regards!!
Rishabh Rathor
Plz Help me ASAP.
========Apex Controller=============
public class AccordianCntrl {
public String selectedaccountId { get; set; }
public List<Contact> Contacts{get;set;}
public AccordianCntrl(){
Contacts = new List<Contact>();
}
public List<Account> getListOfAccounts()
{
List<Account> AccountList = [select id,Name,Phone,AccountNumber,Industry from Account Limit 10] ;
return AccountList;
}
// Return Accounts
public pagereference contactNames()
{
system.debug('id '+selectedaccountId);
Contacts = [Select FirstName, LastName, Email , Phone From Contact where Accountid=:selectedaccountId];
//List<Contact> results1 = [Select FirstName, LastName, Email , Phone From Contact ];
System.debug(Contacts);
return null;
}
}
========VF Page===================
<apex:page controller="AccordianCntrl" docType="html-5.0" standardStylesheets="true" showHeader="false">
<apex:slds />
<style>
.slds-scope .slds-section { position: relative; margin: 0px;}
.slds-scope .slds-section:after { content: ""; width: 8px; height: 8px; border-bottom: 2px solid #000; border-left: 2px solid #000; position: absolute; transform: rotate(-135deg) skew(0deg); top: 13px; left: 12px; cursor: pointer;}
.slds-scope .slds-section.slds-is-open:after { content: ""; width: 8px; height: 8px; border-bottom: 2px solid #000; border-left: 2px solid #000; position: absolute; transform: rotate(-45deg) skew(0deg); top: 12px; right: 10px; cursor: pointer;}
.slds-scope .slds-section__title-action{ background: transparent; border-top: 1px solid #dddbda !important;}
.slds-scope .slds-section:first-child .slds-section__title-action{ border-top:0px !important;}
.slds-scope .slds-section.slds-is-open .slds-section__content{ padding:15px 30px;}
</style>
<!--jQuery CDN-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Salesforce Lightning Design System Static Resource-->
<apex:stylesheet value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}" />
<script>
var j$ = jQuery.noConflict();
</script>
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<!--The Salesforce Lightning Design System Wrapping Div with Scoping Class -->
<div class="minerva18">
<fieldset class="slds-box slds-theme--default slds-container">
<!-- Single Section Wrapper With Three SLDS Sections, The Wrapper Div Class must be 'Minerva18SectionGroupSingle' -->
<div class="Minerva18SectionGroupSingle" >
<div class="slds-section">
<h3 class="slds-section__title">
<button class="slds-button slds-section__title-action">
<svg aria-hidden="true" class="slds-section__title-action-icon slds-button__icon slds-button__icon--left">
<use xlink:href="{!$Resource.SLDS}/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
</svg>Accounts</button>
</h3>
<div class="slds-section__content">
<apex:outputPanel id="table">
<table class="slds-table slds-table_cell-buffer slds-table_bordered" >
<thead>
<tr >
<th class="" scope="col">
<div class="slds-truncate" title="Name">Name</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Account Number">Account Number</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Phone">Phone</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Industry">Industry</div>
</th>
</tr>
</thead>
<tbody>
<apex:repeat value="{!ListOfAccounts}" var="con">
<tr class="slds-hint-parent">
<td data-label="Account Number" >
<div class="slds-truncate" title="Account Number"> <Apex:outputfield value="{!con.AccountNumber}"/></div>
</td>
<td data-label="Phone">
<div class="slds-truncate" title="Phone"> <apex:outputfield value="{!con.Phone}"/></div>
</td>
<td data-label="Industry">
<div class="slds-truncate" title="Industry"> <apex:outputfield value="{!con.Industry}"/></div>
</td>
</tr>
</apex:repeat>
</tbody>
</table>
<apex:actionSupport event="onchange" action="{!contactNames}" reRender="table"/>
</apex:outputPanel>
</div>
</div>
</div>
<!-- Single Section Wrapper End-->
</fieldset>
<fieldset class="slds-box slds-theme--default slds-container">
<div class="Minerva18SectionGroupSingle" >
<div class="slds-section">
<h3 class="slds-section__title">
<button class="slds-button slds-section__title-action">
<svg aria-hidden="true" class="slds-section__title-action-icon slds-button__icon slds-button__icon--left">
<use xlink:href="{!$Resource.SLDS}/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
</svg>
Related contacts
</button>
</h3>
<div class="slds-section__content">
<p>
Hello...
</p>
</div>
</div>
</div>
</fieldset>
</div>
<script>
/*SLDS Sections*/
j$('.slds-section__content').hide();
j$('.slds-section__title').find('button').find('svg').css('transition', '0.3s');
j$('.slds-section__title').click(function(){
if(j$(this).parent().parent().hasClass('Minerva18SectionGroupSingle')){
if(j$(this).parent().hasClass('slds-is-open')){
j$(this).parent().removeClass('slds-is-open');
j$(this).parent().find('.slds-section__content').hide();
}
else{
j$(this).parent().parent().find('.slds-section').removeClass('slds-is-open');
j$(this).parent().parent().find('.slds-section__content').hide();
j$(this).parent().toggleClass('slds-is-open');
j$(this).parent().find('.slds-section__content').show();
}
}
else{
j$(this).parent().toggleClass('slds-is-open');
if(j$(this).parent().hasClass('slds-is-open')){
j$(this).parent().find('.slds-section__content').show();
}else{
j$(this).parent().find('.slds-section__content').hide();
}
}
});
/*SLDS Sections*/
</script>
</html>
</apex:page>
Thanks & Regards!!
Rishabh Rathor
Plz Help me ASAP.