Display Different Fields on Sharepoint List depending on selected responses in the previous fields?

Question

Beginner Question here - I have a list in SharePoint and I am asking users to respond by clicking the "Add New Item" to bring up the form.

The first field is "Item Type" - a dropdown box with 3 options. Depending on which option the user selects, I'd like to show/hide the next columns I'd like filled out.

Example:

If User Selects option 1 for "Item Type", then

"Option 1 detail 1" (Single Line) is visible and able to be populated. "Option 1 detail 2" (Single Line) is visible and able to be populated.

If User selects option 2 for "Item Type", then

"Option 2 detail 1" (Single Line) is visible and able to be populated.

If User selects option 3 for "Item Type", then no further columns should be displayed and needing to be populated.

I have access to infopath as well but have not yet used it.

Answer 1

It's possible to do it with InfoPath, but I've never tried....

Otherwise you can use JavaScript to do it. with my framework ( SharepointPlus ) it would be:

<script>
// launch the script when the document is loaded
$(document).ready(function() {
  // hide the rows by default
  $SP().formfields("Option 1 detail 1,Option 1 detail 2,Option 2 detail 1,Option 2 detail 2").row().hide();
  // add an action when the value of Item Type is changed
  $SP().formfields("Item Type").elem().on('change', function() {
    var val = $(this).val(); // get the selected value
    // hide all the rows first
    $SP().formfields("Option 1 detail 1,Option 1 detail 2,Option 2 detail 1,Option 2 detail 2").row().hide();
    if (val == "option 1") {
      // show the rows
      $SP().formfields("Option 1 detail 1,Option 1 detail 2").row().show()
    } else if (val == "option 2") {
      $SP().formfields("Option 2 detail 1,Option 2 detail 2").row().show()
    }
  })
})
</script>