I am using SP13 and have a list that have several sections to it. I wish to expand each section if they check the checkbox.

(For instance if flight required is ticked then further fields relating to flight are unhidden. If taxi required is ticked then further field elating to taxi information are unhidden.)

I am very new to SharePoint, I have created the full list but now need to apply the conditions mentioned above.

enter image description here

Does any please have a very detailed step-by-step guide (any screenshots would be extremely helpful) of how to do this. I have seen a few posts online but very basic descriptions of how to achieve this.


2 Answers 2


You can do this by using javascript. Below is a previous post where I was attempting to do the same thing and what I did to accomplish it.

Hide Fields Until a Radio Button is Selected


This isn't done with OOTB SharePoint stuff, but can easily be done with some javascript and jQuery on the page. Something like this should do what you need...

$(document).ready(function () {
    // Setup 'Return travel required?' event
    $('input[Title="Return travel required?"]').change(function () {
        var show = $(this).is(':checked');
        $('input[Title="Inbound Date"]').closest('tr').toggle(show);
        $('input[Title="Inbound - From"]').closest('tr').toggle(show);
        $('input[Title="Inbound - To"]').closest('tr').toggle(show);
        $('input[Title="Inbound - Preferred Time"]').closest('tr').toggle(show);
        $('input[Title="Inbound - Special requirements"]').closest('tr').toggle(show);

    // Setup 'Taxi required?' event
    $('input[Title="Taxi required?"]').change(function () {
        var show = $(this).is(':checked');
        $('input[Title="Taxi Outbound - Date"]').closest('tr').toggle(show);
        $('input[Title="Taxi Outbound - From"]').closest('tr').toggle(show);
        $('input[Title="Taxi Outbound - To"]').closest('tr').toggle(show);
        $('input[Title="Taxi Outbound - Preferred Time"]').closest('tr').toggle(show);
        $('input[Title="Taxi Outbound - Additional Information"]').closest('tr').toggle(show);

    // Setup 'Secondary Taxi required?' event
    $('input[Title="Secondary Taxi required?"]').change(function () {
        var show = $(this).is(':checked');
        $('input[Title="Taxi Inbound - Date"]').closest('tr').toggle(show);
        // ETC...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.