I have a custom VF page. when user select a value it will hide a page blco section. When it hide, it will make a empty back ground space as below, 
Before hide sections After Hide Sections 
Is there any way i can get rid of the space. Thanks
VF code
<apex:pageBlockSection columns="1" id="thePageBlockSection2"> <apex:inputField value="{!Product_Brief__c.Customization_Type__c}" id="myPicklist2" onchange="myPicklistChanged();"/> </apex:pageBlockSection> <div id="section5"> <apex:pageBlockSection title="Section 5: Formulation Modification collapsible="false" columns="1"> <apex:pageBlock > //stuff </apex:pageBlock> </apex:pageBlockSection> </div> <div id="section6"> <apex:pageBlockSection title="Section 6: QC Testing " collapsible="false" columns="1" > // stuff </apex:pageBlockSection> </div> JavaScript
function myPicklistChanged(){ var myPicklistElement = document.getElementById('{!$Component.theForm.thePageBlock.thePageBlockSection2.myPicklist2}'); var myPicklistValue = myPicklistElement.options[myPicklistElement.selectedIndex].value; if (myPicklistValue == 'Existing SKU in different packaging'){ document.getElementById("section5").style.visibility = "hidden"; document.getElementById("section6").style.visibility = "hidden"; } else if (myPicklistValue == 'Existing SKU - modification of formulation, QC or other specifications'){ document.getElementById("section5").style.visibility = "visible"; document.getElementById("section6").style.visibility = "visible"; } else if (myPicklistValue == 'New Formulation - attach formulation including name and concentration for each chemical'){ document.getElementById("section5").style.visibility = "hidden"; document.getElementById("section6").style.visibility = "visible"; } } 
