Hide fields until a value in a radio button is selected

Question

My requirement is that i have a radio button on a New Item form with the values of Yes/No. If No is selected, i need to be able to have 10 fields appear (single line of text) so that the end user can fill in additional information (up to ten line items). How might i accomplish this in SharePoint 2013/Online?

I believe it's possible to make the single line of text fields required if they are on the form using OOTB validation, but what if i want those fields to be hidden until the radio button is selected? I would imagine this would be a javascript/jQuery solution?

EDIT: Added screenshot of form.

EDIT: Updated with solution.

Thanks to everyone who replied for your insights. I ended up creating a New Item form in SP Designer and using jQuery to hide the fields and show them when the "Short all items on PO?" field equaled "No". I changed the field type to choice/drop down as i'm not sure how to code this using radio buttons. Everything i've tried has failed within SP as far as grabbing the selected value of a radio button.

I initially tried to wrap all 10 fields in a div/tr/td/span (tried just about everything) but this kept throwing a web part error or just wouldn't hide the fields. I ended up adding a class to each of the ten fields and hiding them with jQuery. For those interested, below is the code i'm using which is accomplishing what i need. Originally i started the script by just hiding the fields by using the class selector in jQuery. I ran into an issue when i would forget a required field as the form would then reload and hide the fields again. Adding the if statement in the beginning to check the value corrected this.

<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function(){
        var shortVal = $("select[title='Short all items on PO?'] option:selected").val(); 
        if(shortVal === "Yes" || shortVal === ""){          
          $(".lineItems").css("display", "none");
          }
          $("select[title='Short all items on PO?']").change(function(){
              var shortVal = $("select[title='Short all items on PO?'] option:selected").val();
                if(shortVal === "No"){
                  $(".lineItems").css("display", "");
                  }
                    else if(shortVal === "Yes"){
                      $(".lineItems").css("display", "none");
                  }
            });
        });           
    </script>

Answer 1

There are a couple of ways to achieve this

Option 1: Open your list in SharePoint designer and create a new form based on existing new item form template. Set the form you created as a default form. Now modify this form to meet your requirements by adding javascript/jQuery. You can keep the 10 single line of text fields inside a div and hide it on page load. Write a change event for radio button and hide or display the div based on radio button value

Option 2: Edit the existing NewForm.aspx page and add a content editor webpart to the page and add all your javascript/jQuery to the content editor web part.

Option 1 would be a easier way, because you can edit the html of the form too. For example, putting all the 10 fields inside a div and hiding it would be much more easier than hiding all 10 fields separately using jQuery.