How to dynamically display input text field on VF page

Question

On my VF page, I have a main picklist. For a few of those picklist options, if those are selected, I want to then have a new input text field appear on the screen, and if they change the picklist option to something else, then I want that input text field to disappear from the screen. Is that possible? Here is the code so far-- the line that has the "Additional Notes" field in it is what I want to make dependent on the selection in the "Countries" picklist:

<apex:form > <apex:outputPanel id="tstpopup"> <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!IF(displayPopUp, true, false)}"/>

        <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
          <b><u>Equipment Request</u></b> 
            <br/>
            Before submitting this request, please verify this referral information is correct: 
            <br/>
            <br/> <b> Name: </b>  {!lead.name}
            <br/><b> Facility: </b>  {!lead.facility__r.name}
            <br/><b> Height: </b>  {!lead.height__c}
           <br/> <b> Weight: </b>  {!lead.weight__c}
            <br/> <b> Category: &nbsp; </b>   <apex:selectList size="1" value="{!country}">
                            <apex:selectOptions value="{!countries}"/>
                            <apex:actionSupport event="onchange" reRender="a"/>
                         </apex:selectList>  
            <br/> <b> Size: &nbsp; </b>  <apex:selectList size="1" value="{!state}" id="a">
                                          <apex:selectOptions value="{!states}"/>
                                         </apex:selectList>
            <br/>
                    <br/> <b> Additional Notes: </b>  <apex:inputText id="bbb" style="height:30px;" value="{!freeText}" /> 
                                   
           <br/>
           <br/>
             <div align="center"  draggable="false" >
                 Please do not click submit more than once. It takes a few moments to process.
               <apex:commandButton value="Submit" action="{!validateAndRedirect}"/>
               <apex:commandButton value="Cancel" action="{!cancel}"/>
                 
            </div>
        </apex:outputPanel>   

And here is my controller extension (the part relevant to these picklists):

public String country {get;set;}
public String state {get;set;}
public String freeText {get;set;}
public boolean showFreeText {get;set;}

public List<SelectOption> getCountries() {
    List<SelectOption> options = new List<SelectOption>();
    options.add(new SelectOption('','--- Select ---'));        
    options.add(new SelectOption('Bed Frame','Bed Frame'));  
    options.add(new SelectOption('Air Mattress','Air Mattress'));
    options.add(new SelectOption('Wound Vac','Wound Vac'));
    options.add(new SelectOption('Bipap','Bipap'));      
    options.add(new SelectOption('C-pap','C-pap'));      
    options.add(new SelectOption('Wheelchair','Wheelchair'));      
    options.add(new SelectOption('Concentrator','Concentrator'));      
    options.add(new SelectOption('Other','Other'));      
    return options;
} 

public List<SelectOption> getStates() {
    List<SelectOption> options = new List<SelectOption>();
    if(country == 'Bed Frame' || country == 'Air Mattress')
    {       
        options.add(new SelectOption('Standard (36 inch)','Standard (36 inch)'));
        options.add(new SelectOption('42 inch wide','42 inch wide'));
        options.add(new SelectOption('48 inch wide','48 inch wide'));
        options.add(new SelectOption('54 inch wide','54 inch wide'));
        options.add(new SelectOption('84 inch long','84 inch long'));
    }
    else if(country == 'Wheelchair') {       
        options.add(new SelectOption('Geri Chair 30 inch','Geri Chair 30 inch'));
        options.add(new SelectOption('Geri Chair 40 inch','Geri Chair 40 inch'));
        options.add(new SelectOption('22 inch','22 inch'));
        options.add(new SelectOption('24 inch','24 inch'));
        options.add(new SelectOption('26 inch','26 inch'));
        options.add(new SelectOption('30 inch','30 inch'));
        options.add(new SelectOption('34 inch','34 inch'));
    }
    else if(country == 'Concentrator') {       
        options.add(new SelectOption('5 Liter','5 Liter'));
        options.add(new SelectOption('10 Liter','10 Liter'));
        options.add(new SelectOption('10 Liter','10 Liter'));
    }
    else {
        options.add(new SelectOption('None','--- Select ---'));
    }      

    return options;
}       

public string notesTitle(){
    if (state == 'None' || state == '--- Select ---'){
        notesText = 'Additional Notes: ';
    }
    return notesText;
}

Answer 1

You'll need to add another boolean variable to your controller (like what you did with showFreeText). In the below example I called it showAddi.tionalNotes

    <apex:outputPanel rendered="{!showAdditionalNotes}">
        <p>
            Stuff to show if rendered is true
        </p>
    </apex:outputPanel>

This variable should be set to false initially and then updated in a new method in your controller. Something like onCountryChange and then add the logic for which country picklist values should set showAdditionalNotes to True. You will need to add this method in the action parameter of the apex:actionSupport tag so it will be called whenever the country picklist is updated.

   <apex:selectList size="1" value="{!country}">
         <apex:selectOptions value="{!countries}"/>
         <apex:actionSupport event="onchange" reRender="a" action="{!onCountryChange }"/>
  </apex:selectList> 

Hope this helps! I'd also recommend using Salesforce Lighting Design System to help style your page like other Salesforce pages.