I feel as if this should be simple, but apparently, it is not.  I am not well versed in controller creation so much of my function is javaScript-based.  I am reproducing a simple one-column form. I would like to keep the validation and required field function for inputFields and so I must keep my fields within an <apex:pageBlockSection>

Originally, the structure was roughly as follows:

<apex:form>

<apex:pageBlock>

<apex:PageBlockSection>

<div id="hidden1"><apex:inputField value="toe" /></div>

<div id="hidden2"><apex:inputField value="foo" /></div>

<div id="visible"><apex:inputField value="bar" /></div>

</apex:PageBlockSection>

</apex:pageBlock>

</apex:form>

It is seated in an empty, margin-less div with an id so that I can iterate through it with the following javascript&colon;

var hidDiv=["hidden1","hidden2"]

function hideDivs (){

    var len = hidDiv.length; //get length of array

    for (var i=0;i<len;i++) { //loop through array

        var divId=hidDiv[i]; //set array row as value

        document.getElementById(divId).style.display="none"; //hide selected element    

        }

}

Unfortunately, my javascript wouldn't recognize the divs within the pageBlockSection.  The only way I have been able to get the selective hiding of inputFields to work is to only have one inputField per pageBlockSection and then wrap each in a div with a named id.  (this was necessary because I couldn't write the last line of my code as "document.getElementByID("{!$Component.divid}").style.display="none").

So the selective hiding works but at the cost of proper formatting.  Now each question seems to be double-spaced from the next and the alignment is all off. 

 However, each field is now double-spaced,  If I move the same structure outsideof the pBSection the fields are single spaced and neat. 

Can someone either show how to do this more neatly without writing custom controlllers or alternatively, explain how i can adjust the formattting so that my spacing is not all crazy?