My Vf page and controller code here:

*********************************************************************************************
vfpage:


<apex:page controller="account1234" showHeader="false" sidebar="false" standardStylesheets="false">
 <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet" media="screen"/>
 <div class="container" style="background:#666699">
 <div class="col-sm-3" style="background:#00b359;">
 
 <h1>Account</h1>
 <apex:form >
 
 <apex:pageBlock >
  <APEX:panelgrid columns="1" style="background:#00b3b3;">
  
<apex:pageBlockTable value="{!Acclst}" var="A">
   
            
           
            <apex:column > 
            <apex:commandLink value="{!A.Name}" action="{!setupContacts}" rerender="con">
              <apex:param value="{!A.Id}" name="idForConts" assignTo="{!recid}"/>
            </apex:commandLink>
            </apex:column> 
           
          
            </apex:pageBlockTable>
             </APEX:panelgrid>
        </apex:pageBlock>
        
    </apex:form>
    </div>

  <div class="col-sm-1">
  </div>
 
 
  <apex:form >
  
 <apex:pageBlock rendered="{!contacts.size!=0}">
  

  <div class="col-sm-3" style="background:#00b359;">
  <apex:outputText value="Related Contact"></apex:outputText>
      <apex:pageBlockTable value="{!contacts}" var="c" id="con" style="background:#00b3b3;">
        
        
      <apex:column > 
            <apex:commandLink value="{!c.LastName}" action="{!contactdetail}" rerender="detail">
              <apex:param value="{!c.Id}" name="detail" assignTo="{!detid}"/>
            </apex:commandLink>
            </apex:column>  
      </apex:pageBlockTable>
       </div>
     
     
    </apex:pageBlock>
  </apex:form>
  
 <div class="col-sm-1">
  </div>
  <div class="col-sm-3" style="background:#00b359">
  <apex:outputText value="Contact Details" ></apex:outputText>
  <apex:outputpanel id="detail" rendered="{!contactlist.size!=0}">
 
  <apex:form >


      <apex:repeat value="{!contactlist}" var="d" id="detail" >
      
      
      
        
      
        <div class="row">
        <div class="col-sm-12">
                  <apex:outputLabel value="FirstName:" />
                    <apex:outputText value="{!d.FirstName}" />
                    </div>
                    </div>
       <div class="row">
       <div class="col-sm-12">
                  <apex:outputLabel value="Last Name:" />
                    <apex:outputText value="{!d.LastName}" />
                    </div>
                    </div>
      </apex:repeat>
     
  
  </apex:form>
  </apex:outputPanel>
  
  </div>
  
 </div>
 
</apex:page>




****************************************************************************

Controller code:


public class account1234 {

    public void contactdetail() {
        Contactlist=[select id, FirstName, LastName from Contact where Id=:detid];
    }


    public list<contact> Contactlist{get;set;}
        


public string recid{get;set;}
public string detid{get;set;}

  
   public list<Account> Acclst{get;set;}
   Public Account A;

   public List<Contact> contacts {get; set;}

   public account1234(){

   Acclst = [select Id,Name from Account ];
   contacts=null;
   }

  

  public void setupContacts()
  {
     contacts=[select id, FirstName, LastName from Contact where AccountId=:recId];
      }
   }

 

My Trigger Code Here: 


trigger ContactCountTrigger on Contact (After insert, After Delete, After Undelete,after update) {

Set<id> setAccountId=new Set<id>();
if(Trigger.isInsert || Trigger.isUndelete || Trigger.isUpdate){
for(Contact con:Trigger.New){
setAccountId.add(con.AccountId);

}
}
if(Trigger.IsDelete){
for(Contact con:Trigger.old){
setAccountId.add(con.AccountId);

}
}
List<Account> listAcc=[select id,noOfContact__c,(Select id from Contacts)from Account where id in:setAccountId];
for(Account acc:listAcc){
acc.noOfContact__c=acc.contacts.size();

}
update listAcc;
}