Hide and show PageBlockTable

Apex Code :
public class HideAndShowPageBlockTable {
    public List <Account> accountList {get;set;}
    public List<Account> fetchAccounts() {
        accountList = [Select Id,(Select id,name From contacts), Name, BillingCountry from Account];
        return accountList ;
    }
}

Create a static resource with name "Plus_Image" for Plus image.
Create a static resource with name "Minus_Image" for Minusimage.
You can download that images from the url : static resource.
Visualforce Page :
<apex:page tabstyle="Account" controller="HideAndShowPageBlockTable" showheader="false">
    <script>
        function switchMenu(obj,obj1,obj2) {
            var el = document.getElementById(obj);                                      
            if ( el.style.display != 'none' ) {
            el.style.display = 'none';
            }
            else {
            el.style.display = '';
            }
            var e2 = document.getElementById(obj1);                                      
            if ( e2.style.display != 'none' ) {
            e2.style.display = 'none';
            }
            else {
            e2.style.display = '';
            }
             var e3 = document.getElementById(obj2);                                      
            if ( e2.style.display != 'none' ) {
            e3.style.display = 'none';
            }
            else {
            e3.style.display = '';
            }
   
        }
    </script>
    <apex:pageblock >    
        <apex:pageblocktable value="{!accountList}"  var="acc">
            <apex:column headervalue="Account Details">
                <apex:outputpanel id="plusimage">
                         <apex:image url="{!$Resource.Plus_Image}" onclick="switchMenu('{!$Component.inlinetablesec}','{!$Component.minusimage}','{!$Component.plusimage}')" title="Expand - Team Member's"> </apex:image>
                    </apex:outputpanel>
                    <apex:outputpanel id="minusimage" style="display:none;">
                         <apex:image url="{!$Resource.Minus_Image}" onclick="switchMenu('{!$Component.inlinetablesec}','{!$Component.plusimage}','{!$Component.minusimage}')" title="Collapse - Team Member's"></apex:image>
                    </apex:outputpanel>
                    <apex:outputtext value="{!acc.Name}"/>
            </apex:column>
             <apex:column breakBefore="true">
                    <apex:outputpanel id="inlinetablesec" style="display:none;">
                        <apex:pageblocktable value="{!acc.contacts}" var="con" >
                            <apex:column headerValue="Contact Name">
                                   <apex:outputfield value="{!con.Name}"/>
                             </apex:column>
                             <apex:column headerValue="Contact ID">
                                   <apex:outputfield value="{!con.id}"/>
                             </apex:column>                        
                        </apex:pageblocktable>
                   </apex:outputpanel>    
            </apex:column>
        </apex:pageblocktable>
    </apex:pageblock>
</apex:page>
Output :