Show and Hide columns based on choice selection in SharePoint 2016

Question

I have a list with 53 inputs/columns....need an 'If/Then' type code that will show the bottom 32 inputs when the user makes a specific choice in an upper column. 

I've been looking at Show Hide fields based on dropdown selection SharePoint 2013 / 2016 But can't quite see exactly what I need.  Using the noted JS I could, I think, reiterate the if/then for each of the first choices and then each of the 32 columns -- when to show and when to hide. 

Which would result in an incredibly long and confusing code. (I'll admit - any code is a bit confusing for me). 

But if I can get a code that says - if you choose xxx in this column, then the 32 bottom columns will appear for you to fill in. Otherwise, only the top 21 will show. 

Answer 1

Show and Hide multiple columns based on selections in SharePoint 2016

I agree with you, the code mentioned in my blog is suitable for a limited number of columns. otherwise, you will get multiple if/else conditions with a long code.

So In such cases, I would suggest editing your new form with SharePoint Designer then try to do the following:

Steps

• Open your list using SharePoint Designer.

• Click On forms,

  

• From the above ribbon, Click on a new form.

  

• Specify the form name and set it to default.

  

• Edit your form in Advanced mode.

  

• Search for each field you would like to show or hide.
• Set its main row to a specific class name like "hide".

• Save the changes to the new form.
• Open your list in browser, and click on add new Item.
• Edit your page in the browser.
• Add Script Editor.
• Add the below code with your entries.

JS Code

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> </script> 
<script type = "text/javascript">
    
   $(document).ready(function() {
    //Show/hide columns based on Drop Down Selection
    $("select[title='Choice']").change(function() {
        if ($("select[title='Choice']").val() != "Choice 2") {
            hide();
        } else {
            show();
        }
    });
});

function hide() {
    var cols = document.getElementsByClassName("hide");
    for (var i = 0; i < cols.length; i++) {
        cols[i].style.display = 'none';
    }
}

function show() {
    var cols = document.getElementsByClassName("hide");
    for (var i = 0; i < cols.length; i++) {
        cols[i].style.display = '';
    }
}
</script>

Output

---

See Also

• Show Hide fields based on dropdown selection SharePoint 2013 / 2016.
• Show and Hide section based on SharePoint Group.

Comments

Thanks - but I am not "allowed" access to designer.  Anything I do must be done OOB.

---

Unfrothuantly, No!